CODEWITHSUNDEEP
javascripthtml
Amjad Abdullah
Amjad Abdullah

Reputation: 11

Click EN to change to AR and vice versa

When I click on the AR button it changes to the EN button. Then when I click on the EN button it doesn't go back to the AR button.

This is my code:

function change() {
  if (document.getElementById('AE').value = "AR") {
    document.getElementById('AE').innerHTML = "EN";
    document.getElementById('body').dir = "rtl";
    
    fetch("https://api.npoint.io/abb3ff619eec383b1bb7")
      .then(response => response.json())
      .then(data => {
        document.querySelector("#lang").innerText = data.name[0].ara;
      })
  } else {
    document.getElementById('AE').innerHTML = "AR";
    document.getElementById('body').dir = "ltr";
    
    fetch("https://api.npoint.io/abb3ff619eec383b1bb7")
      .then(response => response.json())
      .then(data => {
        document.querySelector("#lang").innerText = data.name[0].eng;
      })

  };
}
<body id="body">
  <button style="color:black;" id="AE" onclick="change()">AR</button>
  <div id="lang">Amjad</div>
</body>

I want when I click EN to change to AR and vice versa. How to solve this issues?

Upvotes: 1

Views: 53

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

First use innerText instead of value of button. And then note that in if clause you've used = instead of ==.

Here is working snippet:

function change() {
    if (document.getElementById('AE').innerText == "AR") {
        document.getElementById('AE').innerHTML = "EN";
        document.getElementById('body').dir = "rtl";
        fetch("https://api.npoint.io/abb3ff619eec383b1bb7")
            .then(response => response.json())
            .then(data => {
                document.querySelector("#lang").innerText = data.name[0].ara;
            })
    } else {
        document.getElementById('AE').innerHTML = "AR";
        document.getElementById('body').dir = "ltr";
        fetch("https://api.npoint.io/abb3ff619eec383b1bb7")
            .then(response => response.json())
            .then(data => {
                document.querySelector("#lang").innerText = data.name[0].eng;
            })
    };
}
<body id="body">
  <button  style="color:black;" id="AE"onclick="change()">AR</button>
  <div id="lang">Amjad</div>
</body>

Upvotes: 1

Related Questions