如何用JavaScript显示输入框文本？新手代码问题求助

Hey there! I see what's going on with your code—you're successfully grabbing the value from the first input box, but you're not actually doing anything with that value to make it visible. Let's fix that!

The Problem in Your Current Code #

Your test() function runs when the button is clicked, and this line gets the input value:

document.getElementById("one").value;

But right now, this value just sits in memory—there's no code to display it anywhere (like the browser console or on the page itself).

Solution 1: Display the Value in the Browser Console #

If you just want to check the value for testing, you can log it to the console using console.log():

<html> 
<head> </head> 
<body> 
  <input type="text" placeholder="Number One" id="one"><br> 
  <input type="text" placeholder="Number Two" id="two"><br> 
  <button onclick="test()">Click Me</button><br> 
  <script> 
    function test() {
      // Get the value and store it in a variable (optional but cleaner)
      const inputValue = document.getElementById("one").value;
      // Log it to the console
      console.log("First input value:", inputValue);
      // You can also log the second input if you want
      const secondValue = document.getElementById("two").value;
      console.log("Second input value:", secondValue);
    } 
  </script> 
</body> 
</html>

To see the console: Right-click your page → Inspect → Go to the "Console" tab.

Solution 2: Display the Value Directly on the Page #

If you want the user to see the value on the webpage, add an element (like a <p> or <div>) to show it, then update that element's content with the input value:

<html> 
<head> </head> 
<body> 
  <input type="text" placeholder="Number One" id="one"><br> 
  <input type="text" placeholder="Number Two" id="two"><br> 
  <button onclick="test()">Click Me</button><br>
  <!-- Add this element to display the result -->
  <div id="displayResult"></div> 
  <script> 
    function test() {
      const firstVal = document.getElementById("one").value;
      const secondVal = document.getElementById("two").value;
      // Update the display element with the values
      document.getElementById("displayResult").textContent = 
        `First input: ${firstVal}, Second input: ${secondVal}`;
    } 
  </script> 
</body> 
</html>

Now when you click the button, the input values will show up right below it on the page.

A quick side note: You don't need the closing </input> tag—<input> is a self-closing element in HTML, so <input type="text" ...> works perfectly fine.

内容的提问来源于stack exchange，提问作者Jenish Maharjan