Question 189596 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why .value is not getting the value of the input field?

I wanted to change the border radius of the div as the input value. can anybody please acknowledge me what is missing here.

HTML

<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>

JS

let btn=document.getElementById('submit');
let value=document.getElementById('value');
let border=document.getElementById("container").style.borderRadius
let pixelVal=value.value+"px";

btn.addEventListener('click', function(){
console.log(pixelVal);
    border=value+"px"
})
Tags:

4

Answers


  1. 0

    Take a look at this code for orientation.

    The input value is read in the click event:

    let btn=document.getElementById('submit');
let value=document.getElementById('value');
let container=document.getElementById("container");

btn.addEventListener('click', function(){
  container.style.borderRadius = value.value + 'px';
})
    #container {
padding: 10px;
border: 1px solid #000;
}
    <div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>
    Login or Signup to reply.
  2. 0

    You just need to move the pixel calculation and style changing lines inside the click event listener’s callback function.

    Otherwise both of these code of lines will be executed only once, and that too before the click listener event runs.

    But we want that style to be applied every-time we click submit button.

    let btn = document.getElementById('submit');
let value = document.getElementById('value');

btn.addEventListener('click', function() {
  let pixelVal = value.value + "px";
  console.log(pixelVal);
  document.getElementById("container").style.borderRadius = pixelVal;
})
    <div id="container">
  <p class="test">
    Test
  </p>

  <input id="value" type="number" />
  <input type="submit" id="submit" />
</div>

    Hope it helps!

    Login or Signup to reply.
  3. 0

    1. pixelVal is moved inside the event listener. This ensures that the value of the input is read when the button is clicked and not when the script is initially loaded.

    2. Access the style property of the container element in the event listener.

    let btn = document.getElementById('submit');
let value = document.getElementById('value');
let border = document.getElementById("container");

btn.addEventListener('click', function(){
    let pixelVal = value.value+"px";
    console.log(pixelVal);
    border.style.borderRadius = pixelVal;
})
    #container {
  border: 1px solid;
  padding: 20px;
}
    <div id="container">
  <p class="test"> Test</p>
  <input id="value" type="number" />
  <input type="submit" id="submit"/>
</div>
    Login or Signup to reply.
  4. 0 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container{
        background-color: yellow;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <p class="test">Test</p>
      <input id="value" type="number" />
      <input type="submit" id="submit" />
    </div>
  </body>
  <script>
    let btn = document.getElementById("submit");
    btn.addEventListener("click", function () {
      let value = document.getElementById("value");
      let border = document.getElementById("container");
      let pixelVal = value.value + "px";
      console.log(pixelVal);
      border.style.borderRadius = pixelVal
    });
  </script>
</html>
    • Here I have improved your code so now its working. Input value should
      be only fetched when button is clicked otherwise It will be null. Thats
      why Your code is not working as you want.
    • Let me know if you don’t get…Thank You…!
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search