通過onclick更改Javascript變量
[英]Change Javascript variable by onclick
問題描述
我想通過使用onclick更改var1和init。 如果我將var1和var init設置為恆定值，則+6和-6按鈕可以正常工作。 所以現在我想用onclick更改var1和init。 但是onclick不會提交var。 我希望你能幫助我。
<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
使用你的結構
每次要更改變量時，都需要重建數組。 我建議將其移至專用功能：
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.
然后，您需要通過單擊按鈕來調用以更改變量的函數。 我個人將使用javascript click事件，而不是使用內聯腳本，而是堅持使用您的方法：
function changeVar1(val){
var1 = val;
setArray();
}
function changeInit(val){
init = val;
setArray();
}
然后您的按鈕將如下所示：
<input type="button" name="00 UTC" value="00 UTC" onclick="changeInit('00');">
<input type="button" name="1" value="var1" onclick="changeVar1('1');">
替代方法（需要JQuery）
這就是我個人要做的事情，它確實使用了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();
});
});
您的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
這是工作版本：
<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>
從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更改圖像
[英]Passing Variable To External Javascript File To Change Images Via onClick
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
用onclick改變Javascript變量
Javascript onclick更改變量
在onclick之后更改javascript中的變量
javascript，html onclick更改變量
Javascript onclick更改變量值
更改變量屬性 onclick javascript
從javascript onclick返回值到變量或使用onclick更改全局變量
無法在 javascript 中用 onclick function 更改變量值
JavaScript“文本更改onclick”中的PHP變量
將變量傳遞給外部Javascript文件以通過onClick更改圖像
相關標簽