Question

我试图让用户在页面上输入一个字符串或数字，点击Submit并让console.log打印刚输入的字符串，但是我尝试打印的字符串不会打印。

我在这里错过了什么吗？（很抱歉缩进）

<html>
<head>
<body>

 <form>
    <input id="userInput" type="text">
    <input type="submit" id = "submit()">
</form>

<script>
function submit() {
var test = document.getElementById("userInput");
 return console.log(test);
}
</script>
</body>
</head>
</html>

Answer 1

此代码将提供您期望的结果。您无法在return函数中返回console.log来获取价值，也不要使用表格，因此在这种情况下它总是会寻找行动

function submit() {
var test = document.getElementById("userInput").value;
console.log(test);
return test;
}

<div>
    <input id="userInput" type="text">
    <button  onclick = "submit()"> Submit</button>
</div>

Answer 2

您做错了几件事。只需阅读下面的代码，我就为您解释注释。

<html>
<head>
<body>
<form>
  <input id="userInput" type="text">
  <button type="button" id="submitBtn" onclick="submit()">Submit</button> // ID - can't be used for submitting a function
</form>      
<script>
function submit() {
  var test = document.getElementById("userInput");
  alert(test.value); // console.log() - is like a void function and it can't be returned
}
</script>
</body>
</head>
</html>

Answer 3

如果您在控制台中查看，则会看到它正在记录对 element 的引用，而不是在其中输入的值。

这是因为变量tabIndex存储了对该元素的引用。

test

您需要

var test = document.getElementById("userInput");

Answer 4

使用Onclick属性作为“提交”按钮！并且输入的类型应该是按钮，以防止刷新。

<form>
  <input id="userInput" type="text">
  <input type="button" onclick= "submit()">
</form>

在JavaScript代码中添加value属性。

var test = document.getElementById("userInput").value;

Answer 5

请检查以下代码。我想这就是你想要的。问题在于正在筹办活动

<form>
    <input id="userInput" type="text">
    <input id="myBtn" type="submit">
</form>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
 var test = document.getElementById("userInput");
 console.log(test);
 return false;
});
</script>

为什么我的函数不返回用户输入的字符串

5 个答案: