在没有 jquery 的情况下查找表单输入答案

【问题标题】：Find form input without jquery在没有 jquery 的情况下查找表单输入
【发布时间】：2019-07-03 12:28:50
【问题描述】：

您好，我想从表单中获取字符串。我是 javascript 的新手。在 console.log(value) 中，值是值。为什么？我希望它是来自的价值我的表格。谢谢！ :)

let value = document.getElementById("password").value;
console.log(value);

<form>
  <input type="text" name="password" value="" id="password" />
</form>

【问题讨论】：

问题出在哪里？
会不会是你在做console.log("value")而不是console.log(value)？
用console.log(value)表示未定义
是记录undefined 还是返回undefined？试试alert 而不是console.log？
你可以使用coden-p并给我们示例代码

标签： javascript forms input

【解决方案1】：

您可以尝试使用它来获取更改时的字符串：

<form>
  <input type="text" name="password" value="" id="password" />
</form>
<div id="result"></div>

// Here myString is declared outside event listener so it can be used to store data.
let myString = "";

// This will be executed only on input changes.
document.getElementById("password").addEventListener('input', (event) => {
  // Store string value
  myString  = event.srcElement.value;

  // this will log string value
  console.log(myString);
  // or
  logPassword();

  // output value in another html tag
  document.getElementById("result").innerHTML = myString;
});

// This will log empty string because myString = ""
// This code is executed at start like it is
console.log(myString);

// An example of function that can be create to access myString
function logPassword() {
  console.log(myString);
}

Mozilla input event

编辑：使用按钮的解决方案

注意：不提交东西就不需要form标签。

解决方案 1：

<form>
  <input type="text" name="password" value="" id="password" />
  <!-- Pass the input password value to the write function -->
  <button onclick="writeText(document.getElemenById('password').value)" id="bocken">ok.</button>
</form>
<div id="result"></div>

// Pass the string (submitted password) 
function writeText(myString){
  document.getElementById("result").innerHTML = myString;
}

通过等待 DOM 准备好更好地使用 javascript

// All code inside will be executed only when the page is loaded and ready to use.
document.addEventListener("DOMContentLoaded", function(event) { 
  // do work 
  function writeText(myString){
    document.getElementById("result").innerHTML = myString;
  }
});

解决方案 2：

<input type="text" name="password" value="" id="password" />
<button id="bocken">ok.</button>
</form>
<div id="result"></div>

// All code inside will be executed only when the page is loaded and ready to use.
document.addEventListener("DOMContentLoaded", function(event) { 
  // This will be executed only on button click event.
  document.getElementById("bocken").addEventListener('click', (event) => {
    // output value in another html tag
    document.getElementById("result").innerHTML = document.getElemenById('password').value;
  });
});

【讨论】：

如何在我的网站中输出输入？
值是否保存在 myString 中？ document.getElementById(result).innerHTML = myString 无效
在你的 html 中输入一个值，看看你有什么。在您编写代码的方式中，日志将始终是相同的空字符串，因为值是空的。这就是为什么你必须创建一个事件监听器来检查是否有新数据并用它做什么，但是在事件中。
按下按钮时如何打印？我试过 ``` ``` 。我把它放在一个函数 ``` function writeText(){ document.getElementById( "结果").innerHTML = myString; }``` .我希望 myString 在按下 ok 时执行。