Javascript - Show Value in HTML for Input Element using SetAttribute-CodePudding

I've got a small problem. Possibly only a small issue, but after a few hours of searching, I wasn't able to find and fix my mistake unfortunately. Please be beginner friendly, this is my first experience with Javascipt.

Can someone give me some pointers on how to fix the mistake I made?

I'm trying to integrade Javascript into my Website to load an JSON Object and display it using Javascript with the setAttribute function.

HTML Extract:

<html>
    <body>
        <input type="text"  readonly="true" placeholder="IP" aria-label="IP" id="ip-display">
    </body>
</html>

Javascript:

    function showIP () {
      ipvalue = document.getElementById("ip-display");
      ipvalue.setAttribute("value", "ip");
    }
    
    async function fetchIP() {
      const response = await fetch ('https://api.ipify.org?format=json')
      const ip = await response.json();
    
      console.log(ip);
      showip(ip);
    }
    
    fetchIP();

CodePudding user response：

ipvalue.setAttribute("value", "ip"); makes the IP a fixed string,you need to pass it as a variable

function showIP (ip) { // pass ip here
  ipvalue = document.getElementById("ip-display");
  ipvalue.setAttribute("value", ip);
}

async function fetchIP() {
  const response = await fetch ('https://api.ipify.org?format=json')
  
 /* code here needs to change accodring to your actural response data,
   so that we can get the ip correct*/
  const ip = await response.json().ip

  console.log(ip);
  showIP(ip);
}

fetchIP();