堆栈内存溢出
  简体   繁体   English

通过onclick更改Javascript变量

[英]Change Javascript variable by onclick

 原文  2014-12-24 11:15:27  5   2    javascript/ html

问题描述

i want to change var1 and init by using onclick. 我想通过使用onclick更改var1和init。 If i set var1 and var init with a constant value the buttons +6 und -6 are working correctly. 如果我将var1和var init设置为恒定值，则+6和-6按钮可以正常工作。 So now i want to change var1 and init with onclick. 所以现在我想用onclick更改var1和init。 But onclick does not submit the var . 但是onclick不会提交var。 I hope you can help me. 我希望你能帮助我。 

<script type="text/javascript">
// Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)

var images = new Array(
  'http://www2.wetter3.de/Animation_' + init + '_UTC/00_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/06_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/12_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/18_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/24_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/30_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/36_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/42_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/48_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/54_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/60_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/66_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/72_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/78_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/84_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/90_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/96_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/102_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/108_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/114_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/120_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/126_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/126_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/132_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/138_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/144_' + var1 + '.gif'
);

// Aktueller Bildindex (beim Start 0)
var current_index = 0;


// Bilderwechsel durchführen
function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('image_switch').src = images[current_index];
}

</script>
</head>
<body>

<div style="text-align:center">

  <!-- Das erste Bild hier als src mit angeben! -->
  <img src="http://www2.wetter3.de/Animation_12_UTC/00_1.gif" id="image_switch" alt="" />

  <br />

  <!-- Pfeil nach links -->

 <input type="button" name="-6" value="-6"  onclick="switch_image(0)">
  <!-- Pfeil nach rechts -->
 <input type="button" name="+6"     value="+6"  onclick="switch_image(1)">

</div>

</p> 
<p>
 <input type="button" name="00 UTC" value="00 UTC" onclick="var init='00';">
 <input type="button" name="06 UTC" value="06 UTC" onclick="var init='06';">
 <input type="button" name="12 UTC" value="12 UTC" onclick="var init='12';">
 <input type="button" name="18 UTC" value="18 UTC" onclick="var init='18';">

</p>
<p>
 <input type="button" name="1" value="var1" onclick="var var1='1';">
 <input type="button" name="2" value="var2" onclick="var var1='2';">
 <input type="button" name="3" value="var3" onclick="var var1='3';">
 <input type="button" name="4" value="var4" onclick="var var1='4';">

</p>

2 个解决方案

解决方案1
 0  2014-12-24 11:24:50

Using your structure 使用你的结构

You need to rebuild the array each time you want to change the variables. 每次要更改变量时，都需要重建数组。 I would suggest moving this to a dedicated function: 我建议将其移至专用功能： 

var images, init = '00', var1 = '1';

function setArray(){
    images = new Array(
      'http://www2.wetter3.de/Animation_' + init + '_UTC/00_' + var1 + '.gif',
      'http://www2.wetter3.de/Animation_' + init + '_UTC/06_' + var1 + '.gif',
      //etc..
    );
}
setArray(); // Set the default array.

Then you need functions that is called from the button clicks to change the vars. 然后，您需要通过单击按钮来调用以更改变量的函数。 Personally I would use javascript click events rather than inline scripting, but sticking with your approach: 我个人将使用javascript click事件，而不是使用内联脚本，而是坚持使用您的方法： 

function changeVar1(val){
    var1 = val;
    setArray();
}

function changeInit(val){
    init = val;
    setArray();
}

Then your buttons will look something like this: 然后您的按钮将如下所示： 

<input type="button" name="00 UTC" value="00 UTC" onclick="changeInit('00');">

<input type="button" name="1" value="var1" onclick="changeVar1('1');">

Alternate approach (requires JQuery) 替代方法（需要JQuery）

This is how I would personally do it, it does use JQuery (because that's what I am comfortable with), but you could do the same without JQuery if you wanted to work it out. 这就是我个人要做的事情，它确实使用了JQuery（因为这是我很满意的），但是如果您想解决这个问题，也可以在没有JQuery的情况下进行相同的操作。 

var images, init = '00', var1 = '1';

function setArray(){
   images = new Array();
   for(var i = 0; i <= 144; i++){
      var val = i < 10 ? "0" + i : "" + i;
      images.push('http://www2.wetter3.de/Animation_' + init + '_UTC/' + val + '_' + var1 + '.gif');
   }
};

$(document).ready(function(){
    setArray(); // Set default array.

    $(".changeinit").click(function(){
        init = $(this).data("val");
        setArray();
    });

    $(".changevar").click(function(){
        var1 = $(this).data("val");
        setArray();
    });
});

And your HTML buttons like this: 您的HTML按钮是这样的： 

<input type="button" name="00 UTC" value="00 UTC" class="changeinit" data-val="00">
<input type="button" name="06 UTC" value="06 UTC" class="changeinit" data-val="06">
<input type="button" name="12 UTC" value="12 UTC" class="changeinit" data-val="12">
<input type="button" name="18 UTC" value="18 UTC" class="changeinit" data-val="18">

<input type="button" name="1" value="var1" class="changevar" data-val="1">
<input type="button" name="2" value="var2" class="changevar" data-val="2">
<input type="button" name="3" value="var3" class="changevar" data-val="3">
<input type="button" name="4" value="var4" class="changevar" data-val="4">

解决方案2
 0 已采纳  2014-12-24 11:28:29

This is the working version : 这是工作版本： 

    <script type="text/javascript">
// Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
var init = '00';
var var1 = '1';

var images = new Array(
  'http://www2.wetter3.de/Animation_{init}_UTC/00_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/06_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/12_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/18_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/24_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/30_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/36_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/42_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/48_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/54_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/60_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/66_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/72_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/78_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/84_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/90_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/96_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/102_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/108_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/114_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/120_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/126_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/126_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/132_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/138_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/144_{var1}.gif'
);

// Aktueller Bildindex (beim Start 0)
var current_index = 0;


// Bilderwechsel durchführen
function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('image_switch').src = images[current_index].replace("{init}", init).replace("{var1}",var1);
}

</script>
</head>
<body>

<div style="text-align:center">

  <!-- Das erste Bild hier als src mit angeben! -->
  <img src="http://www2.wetter3.de/Animation_12_UTC/00_1.gif" id="image_switch" alt="" />

  <br />

  <!-- Pfeil nach links -->

 <input type="button" name="-6" value="-6"  onclick="switch_image(0)">
  <!-- Pfeil nach rechts -->
 <input type="button" name="+6"     value="+6"  onclick="switch_image(1)">

</div>

</p> 
<p>
 <input type="button" name="00 UTC" value="00 UTC" onclick="init='00';">
 <input type="button" name="06 UTC" value="06 UTC" onclick="init='06';">
 <input type="button" name="12 UTC" value="12 UTC" onclick="init='12';">
 <input type="button" name="18 UTC" value="18 UTC" onclick="init='18';">

</p>
<p>
 <input type="button" name="1" value="var1" onclick="var1='1';">
 <input type="button" name="2" value="var2" onclick="var1='2';">
 <input type="button" name="3" value="var3" onclick="var1='3';">
 <input type="button" name="4" value="var4" onclick="var1='4';">

</p>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用onclick改变Javascript变量 - Javascript variable change with onclick Javascript onclick更改变量 - Javascript onclick change the variable 在onclick之后更改javascript中的变量 - Change a variable in javascript after onclick javascript，html onclick更改变量 - javascript, html onclick change variable Javascript onclick更改变量值 - Javascript onclick change variable value 更改变量属性 onclick javascript - Change variable property onclick javascript 从javascript onclick返回值到变量或使用onclick更改全局变量 - Return value from javascript onclick to variable or change global variable with onclick 无法在 javascript 中用 onclick function 更改变量值 - Unable to change variable value with onclick function in javascript JavaScript“文本更改onclick”中的PHP变量 - PHP variable inside a JavaScript “text change onclick” 将变量传递给外部Javascript文件以通过onClick更改图像 - Passing Variable To External Javascript File To Change Images Via onClick
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM