+ 5

Finding a Simpler way

https://code.sololearn.com/W9O2h1GvXw09/?ref=app HTML: <button onclick="show(1)">click 1</button> <button onclick="show(2>click 2</button> <button onclick="show(3)"</button> ..... JS: function show(n){ switch(n){ case 1: document.getElementById("one").style.display="flex"; document.getElementById("two").style.display="none"; document.getElementById("three").style.display="none"; break; case 2: document.getElementById("two").style.display="flex"; document.getElementById("one").style.display="none"; document.getElementById("three").style.display="none"; break; case 3: document.getElementById("three").style.display="flex"; document.getElementById("two").style.display="none"; document.getElementById("one").style.display="none"; break; } } Do you know another way to do the same job in this code. Note: Simpler way means less code lines ;)

15th Jul 2020, 4:03 PM
Kashyap Kumar
Kashyap Kumar - avatar
1 Answer
+ 5
Store display options into array and choose by value of <n>. function show(n) { const displayOptions = [ "none", "flex" ]; document.getElementById( "one" ).style.display = displayOptions[ Number( n === 1) ]; document.getElementById( "two" ).style.display = displayOptions[ Number( n === 2 ) ]; document.getElementById( "three" ).style.display = displayOptions[ Number( n === 3 ) ]; }
15th Jul 2020, 4:33 PM
Ipang