Jquery working only when click first time not on other time

Question

Hi I am having given 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 once it changes my text but when click on again then it does not change please guide me how to solve this. Thanx in advance

Answer 1

This is is because your code always looks for the word " January " to replace. The first time your code is executed, it replaces the word January by the year. The second time you click, it does not find the word January to replace by the selected year. Therefore nothing happens after the first replacement.

Answer 2

Everyone's pointed out why it wont work a second time, but nobody's given you a solution.

Wrap 'January' in its own selector - you can then just set its text without having to worry 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;
    }
});

For completion - your code always looks to replace the word 'January'. Once it's replaced the first time, the text no longer reads 'January', so replacing 'January' will have no effect.

Answer 3

It will surely not work. It will Only Replace if text string contains January .

return text.replace('January','anything')

This looks for January in text string and replaces with anything if January exists.

will only replace January once. 只会取代一月一次。

Answer 4

There are few problems in your code:

1) You are replacing 'January' in test 1 but January doesn't exist. 2) After you have replaced 'January' with 'mario', then January cannot be found again because now there is mario hence it is not working.

See the fiddle : " https://jsfiddle.net/sga5mt0u/ "

Here for "test1", january is replaced by the year(say 2015) Then for "test2", "2015" is replaced by "mario".

Answer 5

when you run

case 'test1':
    $("#myText").text(function(e, text) {
      return text.replace('January', currentSelectedYear);
    });

$('#myText') have value is : "hii farjiz calendar 2015"

accrue when you click second

case 'test2':
        $("#myText").text(function(e, text) {
          return text.replace('January', 'mario');
        });

$('#myText') don't have 'January' for replace.