En la imagen, todos los precios están en EUR, los precios de tr están ocultos en el sitio. Cuando hago clic en el enlace de arriba, se mostrarán los precios de TL y TL y se ocultarán los precios en euros. Cuando hago clic en el enlace del euro, el tl se ocultará y se mostrará el euro. Hay un problema en el código pero no pude solucionarlo gracias de antemano
<button onclick="TL()">TL</button>-<button onclick="EURO()">EURO</button> <div id="fiyat"> 29.5 </div><div id="fiyattl" style="display: none;" > 400 TL </div> <div id="fiyat1"> 29.5 </div><div id="fiyattl1" style="display: none;" > 500TL</div> <div id="fiyat2"> 29.5 </div><div id="fiyattl2" style="display: none;" > 600TL </div> <div id="fiyat3"> 29.5 </div><div id="fiyattl3" style="display: none;" > 700 TL</div> <div id="fiyat4"> 29.5 </div><div id="fiyattl4" style="display: none;" > 800 TL</div> <script> function TL() { var x = document.getElementById("fiyattl"); var y = document.getElementById("fiyattl1"); var z= document.getElementById("fiyattl2"); var t = document.getElementById("fiyattl3"); var w = document.getElementById("fiyattl4"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } if (y.style.display === "none") { y.style.display = "block"; } else { y.style.display = "none"; } if (z.style.display === "none") { z.style.display = "block"; } else { z.style.display = "none"; } if (t.style.display === "none") { t.style.display = "block"; } else { t.style.display = "none"; } if (w.style.display === "none") { w.style.display = "block"; } else { w.style.display = "none"; } } </script>Si asigna un nombre de clase a estos elementos div que refleja la moneda, entonces puede identificar todos los nodos que se ocultarán o mostrarán con bastante facilidad utilizando métodos nativos de JavaScript. A continuación, los controladores de eventos en línea se reemplazan con detectores registrados externamente que usan el name del botón en el que se hizo clic para identificar los nodos de precio que tienen ese nombre como atributo de clase. Podría usar atributos de dataset de datos en su lugar, por supuesto, pero no hay necesidad de usar múltiples ID, que fácilmente pueden volverse difíciles de mantener y propensos a problemas.
/* querySelectorAll will attempt to match DOM elements based upon the expression used. Here we find both/all buttons in the DOM - this could be honed to identify ONLY the buttons of interest if required by modifying the buttons (add a className for instance) and editing the expression used. The button collection is iterated through and an event listener is added to process the `click` event. */ document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){ /* The click event handler Identify the DIV elements that have the class attribute that matches the name of the button. Iterate through that collection and set the display property to "block" */ let col=document.querySelectorAll( 'div.'+this.getAttribute('name') ); col.forEach( n => n.style.display='block' ) /* then identify the DIV elements that are not relevant, iterate through that collection and assign them as hidden. */ col=document.querySelectorAll('div:not([class="'+this.getAttribute('name')+'"])'); col.forEach( n => n.style.display='none' ); })); <button name='tl'>TL</button>-<button name='euro'>EURO</button> <div class='euro'>29.5</div><div class='tl' style='display:none;'>400 TL</div> <div class='euro'>29.5</div><div class='tl' style='display:none;'>500TL</div> <div class='euro'>29.5</div><div class='tl' style='display:none;'>600TL</div> <div class='euro'>29.5</div><div class='tl' style='display:none;'>700 TL</div> <div class='euro'>29.5</div><div class='tl' style='display:none;'>800 TL</div>