I wrote a javascript code so that when I clicked on an element in the form, there are hidden elements. The problem is when you open the site in the firefox browser the script works fine, but if you open it in chrome it does not work.

function focux() { document.getElementById('hidden_content').style.display = 'block'; document.getElementById('hidden_content2').style.display = 'none'; } function focux2() { document.getElementById('hidden_content2').style.display = 'block'; document.getElementById('hidden_content').style.display = 'none'; } 
 <select name="" id=""> <option value="" onclick="focux()">1</option> <option value="" onclick="focux2()">2</option> <option value="">3</option> </select> <p id="hidden_content" style="display: none;">Bul focux()</p> <p id="hidden_content2" style="display: none;">Bul focux2()</p>

  • 2
    Onclick on select options only works in Firefox. Use the onchange event. - Yaant

1 answer 1

Remove onclick on option elements and put onchange on the select element, and there already set the output of the element depending on the value value.

For example, change the html layout:

 <select id="test" onchange="test();"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

And use this function:

 function test() { var id = document.getElementById('test').value; if (id == 1) { document.getElementById('hidden_content').style.display = 'block'; document.getElementById('hidden_content2').style.display = 'none'; } else if (id == 2) { document.getElementById('hidden_content2').style.display = 'block'; document.getElementById('hidden_content').style.display = 'none'; } }

PS Also, it does not hurt you to bring your code and namespace at least in relative order. Use wrapper functions for similar operations.