Show div when text area equals a certain value

Question

I'm aware this question, or similar questions, have been asked plenty of times but so far no answers quite work for me.

I have this code:

  $(document).ready(function() { $(".ta").keyup(function() { if (this.value == "0") { $("#div1").css("display", "block"); } else { $("#div1").css("display", "none"); } if (this.value == "1") { $("#div2").css("display", "block"); } else { $("#div2").css("display", "none"); } if (this.value == "2") { $("#div3").css("display", "block"); } else { $("#div3").css("display", "none"); } }); }); var data = { "ARS": { "01To03Years": { "N": { "ARGENTINA": 951433 } }, "Above05Years": { "N": { "ARGENTINA": 3719665 } } }, "CNY": { "03To05Years": { "N": { "CHINA": 162950484 } } }, "COP": { "Above05Years": { "N": { "COLOMBIA": 323390000 } } }, "EUR": { "01To03Years": { "Y": { "BELGIUM": 393292575 } } } }, points = [], currencyPoints, currencyVal, currencyI = 0, periodPoints, periodI, yesOrNoPoints, yesOrNoI, currency, period, yesOrNo, mil, causeMil, causeMilI, causeName = { 'N': 'Country Name', 'Y': 'Country Name' }; for (currency in data) { if (data.hasOwnProperty(currency)) { currencyVal = 0; currencyPoints = { id: 'id_' + currencyI, name: currency, color: Highcharts.getOptions().colors[currencyI] }; periodI = 0; for (period in data[currency]) { if (data[currency].hasOwnProperty(period)) { periodPoints = { id: currencyPoints.id + '_' + periodI, name: period, parent: currencyPoints.id }; points.push(periodPoints); yesOrNoI = 0; for (yesOrNo in data[currency][period]) { if (data[currency][period].hasOwnProperty(yesOrNo)) { yesOrNoPoints = { id: periodPoints.id + '_' + yesOrNoI, name: yesOrNo, parent: periodPoints.id, }; causeMilI = 0; for (mil in data[currency][period][yesOrNo]) { if (data[currency][period][yesOrNo].hasOwnProperty(mil)) { causeMil = { id: yesOrNoPoints.id + '_' + causeMilI, name: mil, parent: yesOrNoPoints.id, value: Math.round(+data[currency][period][yesOrNo][mil]) }; currencyVal += causeMil.value; points.push(causeMil); causeMilI = causeMilI + 1; } } points.push(yesOrNoPoints); yesOrNoI = yesOrNoI + 1; } } periodI = periodI + 1; } } currencyPoints.value = Math.round(currencyVal / periodI); points.push(currencyPoints); currencyI = currencyI + 1; } } Highcharts.chart('container', { xAxis: { events: { setExtremes: function(e) { $('.ta').val(Math.abs(this.chart.series[0].tree.levelDynamic)); }, } }, series: [{ type: 'treemap', layoutAlgorithm: 'squarified', allowDrillToNode: true, levelIsConstant: false, animationLimit: 1000, dataLabels: { enabled: false }, levelIsConstant: false, levels: [{ level: 1, dataLabels: { enabled: true }, borderWidth: 3 }], data: points }], title: { text: '' } }); 

 #container { min-width: 300px; max-width: 600px; margin: 0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <div id="container"></div> <textarea class="ta" name="text" id="text" cols="30" rows="10"></textarea> <div id="div1" style="display: none; height: 100px; width: 100px; background: blue;"></div> <div id="div2" style="display: none; height: 100px; width: 100px; background: red;"></div> <div id="div3" style="display: none; height: 100px; width: 100px; background: yellow;"></div> 

As you can see, when you drill down different levels of the chart, the text area is updated with a relevant number indicating what level you are on.

For each different level I want to display a different div.

However, the jQuery I am using which I used from this example...

http://jsfiddle.net/pranavcbalan/8mzgj/1/

...Doesn't seem to do the job. The logic is there - If the value of the text area equals a particular number - Show a particular div. But this does not happen.

Does anyone know why?

Many thanks!:)

EDIT

Here is a link to a JSFiddle to make it easier to view:

https://jsfiddle.net/GeorgeBT/z49f6gp4/

Answer 1

Use .change() rather than .keyup(). You are not triggering .keyup() at all.

Changing a value via

$('.ta').val(...)

does not trigger .keyup(...) event handler, which is triggered on a manual key event. Try using change(...) event handler instead.

Edit: if the change event isn't fired, trigger it programmatically using

$('.ta').change();

at the end of your value-changing code.