如何通过单击按钮将用户输入保存为 javascript 中的变量？答案

【问题标题】：How can I save user input as a variable in javascript with a button onclick?如何通过单击按钮将用户输入保存为 javascript 中的变量？
【发布时间】：2018-04-03 09:20:06
【问题描述】：

当用户单击按钮时，我想将用户在输入中键入的内容保存为变量。比，我想用用户信息来控制台记录新变量。我做错了什么？

<html>    
    <div class="container bg-light">
        <div class="row">
    
          <div class="col-md-3 bg-danger">
          </div>
          <div class="col-md-6">
            <div class="form-group text-center">
              <h1>Saving User Data as a Variable with Javascript</h1>
    
              <div class="form-group">
                <input id="userdata" class="form-control">
              </div>
              <div class="form-group mx-auto text-center">
    
                <button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
              </div>
            </div>
          </div>
          <div class="col-md-3 bg-danger">
          </div>
        </div>
      </div>
      
      <script>
      function saveUserData() 
      {
    	// store the tag with id="sign" in var userdata
    	var userdata = document.getElementById("userdata");
      }
      
      // confirm the element exists and what value the user submits
    	console.log(userdata);
    	console.log("users value is: " + userdata.value);
      </script>
</html>

【问题讨论】：

您在函数saveUserData() 内部定义了userdata，但您尝试在未定义userdata 的函数中显示值。您的脚本也会立即执行，因此您会看到一个空值

标签： javascript variables input onclick

【解决方案1】：

function saveUserData() {
   var name = document.getElementById('userdata').value;
   
   console.log("users value is: " + name);
}

<div class="container bg-light">
        <div class="row">
    
          <div class="col-md-3 bg-danger">
          </div>
          <div class="col-md-6">
            <div class="form-group text-center">
              <h1>Saving User Data as a Variable with Javascript</h1>
    
              <div class="form-group">
                <input id="userdata" class="form-control">
              </div>
              <div class="form-group mx-auto text-center">
    
                <button type="button" onclick="saveUserData()" class="btn btn-danger btn-lg mx-auto w-50 text-center">Check console</button>
              </div>
            </div>
          </div>
          <div class="col-md-3 bg-danger">
          </div>
        </div>
      </div>

【讨论】：

【解决方案2】：

试试这个

function saveUserData() {
 var userdata = document.getElementById('userdata').value;
 console.log("users value is: " + userdata);
}

【讨论】：

没用我收到这个错误... 未捕获的 ReferenceError: saveUserData is not defined at HTMLButtonElement.onclick
这段代码没问题。您不能在 HTMLButtonElement 中定义 saveUserData 函数。
@TonyCarbetta 将您的问题编辑为您的最新代码。而这个答案需要一些解释。