Question

我有两个问题 1）我写了这个html标签并在单独的文件中创建了javascript。

<input type="text" id="callno" value="3333">

在js中，我有

var PhoneNumber = document.getElementById("callno").value;

但是，当我在浏览器（Google Chrome）中查看控制台时，我发现错误未捕获的TypeError：无法读取属性'value'为null 。

2）每当我更新自动更新的PhoneNumber值的html标签值时，我该怎么做呢。

Answer 1

您最有可能尝试在将HTML元素解析为DOM之前运行该JavaScript代码。

当JavaScript运行时，input元素尚未加载到内存中，因此document.getElementById()会返回null，然后您尝试获取value那（因此你的错误信息）。

您可以将脚本移动到body元素的末尾，也可以为页面加载时设置事件处理程序。

场景＃1（移动脚本以便在所有HTML之后发生）

<html>
<head>
</head>
<body>
<input type="text" id="callno" value="3333">
<script>
(function(){
  // It's best to just cache DOM refrences, not actual properties
  // so that you can reuse the reference for multiple reasons
  
  // Don't do this:
  //var phoneNumber = document.getElementById("callno").value;
  
  // Do this:
  var phoneElement = document.getElementById("callno");
  
  // We'll declare a variable that will hold the actual value
  // This way, you can use the variable at any point you may need to. 
  // If we only set the value here though, it won't be updated when
  // the value changes.
  var phoneNumber = phoneElement.value;
  
  // Now, we can do many things with that element.
  // In this case, we'll wire it up to an input event
  // handling function that fires whenever the element
  // receives input
  phoneElement.addEventListener("input", function(){
    // And then we can use it to get its stored value
    // It's important that we update the variable when
    // the textbox value changes.
    phoneNumber = phoneElement.value
    console.log(phoneNumber);
  });
}());
</script>
</body>
</html>

场景＃2（设置一个等待页面准备好的事件处理程序）

<html>
<head>
  <script>
    // Wait until the window has parsed all the HTML elements
    // before running its callback function:
    window.addEventListener("DOMContentLoaded", function(){
      
      // This function won't execute until all the HTML elements
      // have been read into memory. By now, the input element
      // we need is ready to be read.
      
      // It's best to just cache DOM refrences, not actual properties
      // so that you can reuse the reference for multiple reasons
  
      // Don't do this:
      //var phoneNumber = document.getElementById("callno").value;
  
      // Do this:
      var phoneElement = document.getElementById("callno");
  
      // We'll declare a variable that will hold the actual value
      // This way, you can use the variable at any point you may need to. 
      // If we only set the value here though, it won't be updated when
      // the value changes.
      var phoneNumber = phoneElement.value;
  
      // Now, we can do many things with that element.
      // In this case, we'll wire it up to an input event
      // handling function that fires whenever the element
      // receives input
      phoneElement.addEventListener("input", function(){
        // And then we can use it to get its stored value
        // It's important that we update the variable when
        // the textbox value changes.
        phoneNumber = phoneElement.value
        console.log(phoneNumber);
      });
    });
</script>
</head>
<body>
 <input type="text" id="callno" value="3333">
</body>
</html>

Answer 2

这应该有效：

<!DOCTYPE html>
<html>
<body>

<input id="myInput" onchange="myFunction()" value="1234">

<p>Change the above input value and click enter.</p>


<p id="myOutput">VALUE HERE</p>

<script>

var x;

function myFunction() {
    x = document.getElementById("myInput").value;
    document.getElementById("myOutput").innerHTML = x;
}
</script>

</body>
</html>

Answer 3

我不相信你可以在输入标签上使用document.getElementById("x").value。为了做您喜欢的事情，您可能需要合并HTML表单和PHP。 HTML表单的基本标记是<form action="action.php"> ... </form> 但是，我对PHP不太好，所以我无法帮助你完成这一部分。遗憾。

Javascript错误：未捕获TypeError：无法读取null

3 个答案: