Question 255809 in Html Question posted in
Some basic documentation can be found here.

Html – Why doesn't document.getElementById work within a function

`Why does it work outside the function tho? What’s wrong? I dont get it… Tried adding return statemnts – still nothing. [[enter image description here](https://phpout.com/wp-content/uploads/2023/09/ZWAvj.png)](https://phpout.com/wp-content/uploads/2023/09/HteFI.png)

DOESN’T WORK:

function changeValue() {
    let charge = document.getElementById("myRange").value;
document.getElementById("displayValue").innerHTML = charge;

}

WORKS:

 let charge = document.getElementById("myRange").value;
document.getElementById("displayValue").innerHTML = charge;

my HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Battery Emulatior</title>
  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link rel="stylesheet" href="battery.css">
  
</head>

<body>

  <h1>INTERACTIVE BATTERY EMULATOR</h1>
  <p1>Choose the expiration period</p1>
  <div class="indicator"> 
    <div class="batteryterminal"></div>
  </div>
  <div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  </div>
  <div id="displayValue"></div>
  
  <script src="battery.js"></script>
</body>

</html>

`
tried adding return statements – nothing

Tags:

2

Answers


  1. 0

    You need to call the function for it to execute

    function changeValue() {
  let charge = document.getElementById("myRange").value;
  document.getElementById("displayValue").innerHTML = charge;
}
changeValue()
    Login or Signup to reply.
  2. 0 
        const myRange = document.getElementById("myRange");
    const changeValue = function () {
        document.getElementById("displayValue").innerHTML = myRange.value;
    };
    changeValue();
    ['change'].forEach((event) => {
        myRange.addEventListener(event, changeValue);
    })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search