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

Javascript using event listener to put value in an input box

const one = document.getElementById("one");
// const input = document.getElementById("input");
one.addEventListener('click', function() {
  // document.forms[0].input.value = '1';

  document.getElementById("input").value = 1;
});
main {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 60px 60px 60px 60px;
}

#clear {
  grid-column: 2/4;
  grid-row: 4/5;
  border: 1px solid blue;
}

div {
  border: 1px solid blue;
  text-align: center;
  font-size: 24px;
  background-color: lightgreen;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
</head>

<body>
  <form name="form1">
    <input id="input" name="input">
  </form>
  <main>
    <div id="one">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div id="clear">CLEAR</div>
  </main>
</body>

</html>

I tried creating buttons using css grid and javascript to put a value to an input box but it doesn’t work. I tried this:

document.getElementById("one").value = 1;

I also tried

document.forms[0].input.value = 1

This is like a calculator problem. You input numbers to an input box by clicking on the number buttons.

Tags:

3

Answers


  1. 0

    Reason1:

    Your issue seems to be that script written on head element, trying to access elements before they are fully loaded.this is the reason everyone writes the javascript at the end of body to ensure that script runs after the once DOM is fully loaded.just replace the script after the body.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>
  <style> /*Write your styles here*/</style>
</head>

<body>
  <form name="form1">
    <input id="input" name="input">
  </form>
  <main>
    <div id="one">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div id="clear">CLEAR</div>
  </main>
<script>//Write your script here </script>
</body>

</html>

    The result will be following error for accessing a dom element before it was defined

    Type error: Cannot read properties of null

    Reason2:

    The script may not fully loaded in the browser to update the changes in the script manually refresh the browser using ctrl+f5

    Login or Signup to reply.
  2. 0

    Actually, your code works. I copy-pasted your code to CodePen and it works. Try refreshing the page or clearing cache.
    Note: By default, the input box type is "text".

    Login or Signup to reply.
  3. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>here the title</title>
</head>
<body>
    <form name="form1">
        <input id="input" name="input">
      </form>
      <main >
        <div class="item" data-value="1">1</div>
        <div class="item" data-value="2">2</div>
        <div class="item" data-value="3">3</div>
        <div class="item" data-value="4">4</div>
        <div class="item" data-value="5">5</div>
        <div class="item" data-value="6">6</div>
        <div class="item" data-value="7">7</div>
        <div class="item" data-value="8">8</div>
        <div class="item" data-value="9">9</div>
        <div class="item" data-value="0">0</div>
        <div id="clear">CLEAR</div>
      </main>

      <script>
        let allItem=document.querySelectorAll('.item');
        for (let i = 0; i < allItem.length; i++) {
            allItem[i].addEventListener('click',()=>{
                document.getElementById('input').value=allItem[i].getAttribute('data-value');
            })
            
        }
        document.getElementById('clear').addEventListener('click',()=>{
            document.getElementById('input').value=''

        })
      </script>
</body>
</html>a
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search