In the picture, all the prices are in EUR, the prices of tr are hidden on the site. When I click on the link above, TL and TL prices will be shown and euro prices will be hidden. When I click on the euro link, the tl will be hidden and the euro will be displayed. There is a problem in the code but I couldn't solve it thanks in advance
<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>
If you assign a className to these div elements that reflects the currency then you can identify all the nodes that are to be either hidden or displayed quite easily using native javascript methods. In the following the inline event handlers are replaced with externally registered listeners that use the name of the clicked button to identify the price nodes that have that name as the class attribute. You could use dataset attributes instead of course but there is no need to use multiple IDs which can easily become hard to maintain and prone to troubles.
/*
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>