How can I get the input of a button on a website using Javascript?

Question

I'm a bloody beginner at this,so please don't judge me,ok? So I made a Website with this text field:

Text: <input type="text" name="text" value="" id="input1"/>

And I made a button,used to get the input of the Text field:

<input type="submit" onclick=getinput>

and this is the getinput()-function:

<script>
   function getinput(){
     const val = document.querySelector('input1').value;
     console.log(val);
     console.log("No error in function implement.");
   }
</script>

but I generated the following error:

VM195:3 Uncaught TypeError: Cannot read properties of null (reading 'value')
    at <anonymous>:3:45

I don't know what this error means,and how to fix it,could someone please help me?

Maik Lowrey · Accepted Answer · 2022-04-30 08:03:14Z

1

You have some small mistake / bugs in your code. i refeactor it.

1.) the querySelector was wrong. For Ids use '#slectorName'.

2.) onclick="getinput()" instead onclick=getinput

function getinput(){
    const val = document.querySelector('#input1').value;
    console.log(val);
    console.log("No error in function implement.");
}

<input type="text" name="text" value="" id="input1"/>

<input type="submit" onclick="getinput()">

answered Apr 30, 2022 at 8:03

Maik Lowrey

17.8k8 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aidan · Accepted Answer · 2022-04-30 08:04:51Z

1

The problem is with the selector. To select an id with document.querySelector, you have to prefix it with a hashtag. Like:

function getinput(){
  const val = document.querySelector('#input1').value;
  console.log(val);
  console.log("No error in function implement.");
}

Alternatively, you can use document.getElementById. For example:

function getinput(){
  const val = document.getElementById('input1').value;
  console.log(val);
  console.log("No error in function implement.");
}

Also, in the submit button, you have to wrap the attribute value in double quotes. You have to write this:

<input type="submit" onclick="getinput()">

instead of this:

<input type="submit" onclick=getinput>

answered Apr 30, 2022 at 8:04

aidan

112 silver badges4 bronze badges

Collectives™ on Stack Overflow

How can I get the input of a button on a website using Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related