Change Javascript variable by onclick
Question
i want to change var1 and init by using onclick. If i set var1 and var init with a constant value the buttons +6 und -6 are working correctly. So now i want to change var1 and init with onclick. But onclick does not submit the 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 answers
solution1
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:
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)
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.
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:
<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">
solution2
0 ACCPTED 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript variable change with onclick
Javascript onclick change the variable
Change a variable in javascript after onclick
javascript, html onclick change variable
Javascript onclick change variable value
Change variable property onclick javascript
Return value from javascript onclick to variable or change global variable with onclick
Unable to change variable value with onclick function in javascript
PHP variable inside a JavaScript “text change onclick”
Passing Variable To External Javascript File To Change Images Via onClick
Related Tags