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

Html – Getting a button to interact with an input to land in console

Using an html file i have created a and and I’m trying get the them to interact using a separate java script file.
I am using the console.log to check if my input is being received and pushed to the console by the button.

This is the body of the HTML file.

const myInput = document.getElementById("myInput");

function guess(myInput) {
  console.log(myInput);
}

myInput.addEventListener("click", document.getElementById("myInput"))
<h1 id="random">Random Number guesser</h1>
<h2>Guess a number below between 1 - 100.</h2>
<div>
  <button id="button" onclick="guess()">Guess!</button>
  <input id="myInput" type="text">
</div>`your text`
<script src="config.js"></script>
Tags:

3

Answers


  1. 0

    This could be a goo starting point. When clicking the button the form will submit. The default behaviour is to reload the page — you don’t want that, therefore e.preventDefault(). Now you can get the value by the name of the input:

    document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log(e.target.myInput.value);
});
    <h1 id="random">Random Number guesser</h1>
<h2>Guess a number below between 1 - 100.</h2>
<form name="form01">
  <button>Guess!</button>
  <input name="myInput" type="text">
</form>
    Login or Signup to reply.
  2. 0

    i did not get your question what are you really trying to say but which i get that you trying to print the value of input box in console so here is the full page code

      <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Guesser</title>
</head>
<body>
  <h1 id="random">Random Number guesser</h1>
  <h2>Guess a number below between 1 - 100.</h2>
  <div>
    <button id="button">Guess!</button>
    <input id="myInput" type="text">
  </div>
  <script>
document.getElementById("button").addEventListener("click", function() {
  var userInput = document.getElementById("myInput").value;
  // Log the input to the console
  console.log("User input: " + userInput);
  // You can add your logic for processing the user input here
});
</script>
</body>
</html>
    Login or Signup to reply.
  3. 0
    1. Fixing your guess function.
      On execution, your guess function does not accept any arguments. Lucky for us, we can access myInput in our JS file. Just by removing the myInput parameter from the guess() function, we can solve the problem. Which also renders the eventListener useless.
    const myInput = document.getElementById("myInput");

function guess() {
  console.log(myInput.value); // use the value property to access the value of your input.
}
    1. Your syntax for the eventListener is also wrong. The second argument of the eventListener is a callback function. Refer to the MDN docs for better explanation. Below is your code fixed to use the eventListener instead of the guess() function.
    <h1 id="random">Random Number guesser</h1>
<h2>Guess a number below between 1 - 100.</h2>
<div>
  <button id="button">Guess!</button>
  <input id="myInput" type="text">
</div>`your text`
<script src="config.js"></script>

    const myInput = document.getElementById("myInput");
const myButton = document.getElementById("button");

button.addEventListener("click", () => {
    console.log(myInput.value);
})

    You don’t need to use both onclick attribute and the eventListener in this case.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search