JQuery only works on first click click not at other time
Hi i gave the code
<div class='school-name'>
<select name="merry" id="exams">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
</select>
<select name="date[year]" id="date_year">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option selected="selected" value="2015">2015</option>
</select>
<button type="button" class='farji'>Click Me!</button>
</div>
<div id='myText'> hii farjiz calendar January</div>
and in my js i have included this
$(document).ready(function() {
$('.farji').click(function(){
currentSelectedYear = $("#date_year option:selected").val()
alert(currentSelectedYear)
switch ($("#exams option:selected").val()) {
case 'test1':
$("#myText").text(function(e, text) {
return text.replace('January', currentSelectedYear);
});
break;
case 'test2':
$("#myText").text(function(e, text) {
return text.replace('January', 'mario');
});
break;
case 'test3':
$("#myText").text(function(e, text) {
return text.replace('January', 'popyee');
});
break;
}
})
})
So when I click on farji as soon as it changes its text, but when I click it again it doesn't change, please help me how to solve this. Thank you in advance
Everyone pointed out why it won't work the second time, but no one gave you a solution.
Wrap January in your own selector - you can simply set its text without worrying about replace
.
HTML:
<div id='myText'> hii farjiz calendar <span id="changeMe">January</span></div>
JS:
$('.farji').click(function(){
currentSelectedYear = $("#date_year option:selected").val();
alert(currentSelectedYear);
switch ($("#exams option:selected").val()) {
case 'test1':
$("#changeMe").text(currentSelectedYear);
break;
case 'test2':
$("#changeMe").text('mario');
break;
case 'test3':
$("#changeMe").text('popeye');
break;
}
});
To complete - your code always appears to replace the word "January". Once it is changed for the first time, the text no longer reads "January", so replacing "January" will have no effect.
source to share
This is because your code is always looking for the word " January " to replace it. The first time the code is executed, it replaces the word "January" with the year. The second time you click, it doesn't find the word "January" to replace with the selected year. Therefore, after the first replacement, nothing happens.
source to share
There are several problems in your code:
1) You replace "January" with test 1
, but January does not exist. 2) After you replaced "january" with "mario", january cannot be found again because now there is mario, hence it does not work.
See fiddle: " https://jsfiddle.net/sga5mt0u/ "
Here for "test1" January is replaced with the year (say 2015) Then for "test2" "2015" is replaced with "mario".
source to share
at startup
case 'test1':
$("#myText").text(function(e, text) {
return text.replace('January', currentSelectedYear);
});
$('#myText')
matter: "hii farjiz calendar 2015"
typed when pressing the second
case 'test2':
$("#myText").text(function(e, text) {
return text.replace('January', 'mario');
});
$('#myText')
do not have a 'January'
replacement.
source to share