Question

请让我知道我做错了什么，我试图调试，但它还没有工作。我想在文本字段中输入信息，然后在单击按钮后显示该信息。

<!DOCTYPE html>
<html>
<head>
  <script type = 'text/javascript'>
    var name; //name
    console.log("hi from script");
    function getName() { //get name
      return document.getElementById("name").value;
    }

    function display()  { //get the name and display
        name = getName();
        alert(name);
    }

    document.getElementById("Submit").onclick = display();
</script>
</head>
<body>

  <form id='form'method = 'post'>
    <p> Name: <input type="text" id="name"/></p>
    <p><input id ="Submit" type = "button" value = 'Submit' /></p>
  </form>

</body>
</html>

Answer 1

问题是您正在使用<form> POST。默认行为是离开页面（如果您要发布到同一页面，则刷新），这样做意味着脚本无法执行任何进一步的功能。为防止出现这种情况，您需要使用 .preventDefault() 来阻止表单提交的默认行为。

为了做到这一点，我已经更改了您的.onclick = display()功能，以便在点击时添加事件监听器，从而阻止默认行为，然后调用display()：

.addEventListener("click", function(event) {
  event.preventDefault();
  display();
});

添加它提供了以下工作示例：

＆＃13;

var name; //name
console.log("hi from script");

function getName() { //get name
  return document.getElementById("name").value;
}

function display() { //get the name and display
  name = getName();
  alert(name);
}

document.getElementById("Submit").addEventListener("click", function(event) {
  event.preventDefault();
  display();
});

＆＃13;

<form id='form' method='post'>
  <p> Name: <input type="text" id="name" /></p>
  <p><input id="Submit" type="button" value='Submit' /></p>
</form>

＆＃13;

希望这有帮助！：）

Answer 2

创建一个空的p标签并给它一个id，然后调用id和.html将文本输入到字段中。像这样

所以准备好你的HTML

<p><span id="youridhere"><p>

然后将此添加到您的函数而不是使用alert。

$('#youridhere').html(name);

应该这样做

这里是我认为你正在寻找的一个方面

https://jsfiddle.net/uzdt715L/

$('button').click(function(){

    var thing = $('#whatever').val();


    $('#final').html(thing);

   });

Answer 3

您需要更新点击处理程序语法。以下内容适用于您，

document.getElementById("Submit").addEventListener("click", display);

请参阅此相关问题 - addEventListener vs onclick

Answer 4

你的代码并没有错。但是因为JavaScript放在htm代码之前，所以onlick事件没有注册。你必须替换

document.getElementById("Submit").onclick = display();

用

document.onload = function() {
    document.getElementById("Submit").onclick = display();
}

很抱歉我正在通过手机回复格式化。

HTML表单使用按钮显示输出

4 个答案: