javascript - 全局变量不起作用 [英] javascript - Global variable not working

问题描述

我想保存一个变量，以便多个函数可以使用它.我遵循了 w3schools 的指示，但它不起作用.我是不是忘记了什么?提前致谢.

I have a variable that I want saved so that multiple functions can use it. I followed w3schools's directions but it doesn't work. Am I forgetting something? Thank you in advance.

var name = document.getElementById('name').value;

function complete() {
 document.getElementById('demo').innerHTML = name;
}

推荐答案

需要考虑以下几点:

• 如果您的代码试图查找某个元素，但该元素尚未被浏览器读取，则浏览器将无法找到它.因此，请确保您的代码仅在加载完整 DOM 后运行通过将脚本放在结束 body 标记之前.
• 不要尝试在页面出现时立即获取表单字段的值加载是因为用户还没有输入任何内容，所以value 什么都不是.您需要设置代码，以便在正确的时间调用您的函数(在用户有机会在表单字段中输入之后)，以便仅在那个时刻到来时获取值.
• 不要给任何元素命名 name 因为全局 window对象有一个名为 name 的属性，默认为空字符串当您尝试访问 name 时，它可能会错误地尝试获取 window.name 而不是名为 name 的元素.
• 只有表单字段具有值属性.所有其他元素都有.textContent(当字符串不包含任何 HTML 或您想要显示实际的 HTML 代码，而不是被解析)和.innerHTML(当字符串确实包含 HTML 并且您想要该代码已解析).

• If you have code that attempts to find an element, but that element hasn't even been read by the browser yet, the browser won't be able to find it. So, make sure that your code only runs AFTER the full DOM has been loaded by placing the script just before the closing body tag.
• Don't attempt to get the value of a form field as soon as the page loads because the user hasn't typed anything into it yet, so the value will be nothing. You need to set up your code so that your function gets called at the right time (after the user has had a chance to type in the form field) so only get the value when that moment has come.
• Don't give any element the name name because the Global window object has a property called name that defaults to an empty string and when you attempt to access name, it could incorrectly attempt to get the window.name instead of your element called name.
• Only form fields have a value property. All other elements have .textContent (used when the string does not contain any HTML or you want the actual HTML code displayed, rather than parsed) and .innerHTML (used when the string does contain HTML and you want that code parsed).

最后，帮自己一个忙，不要使用 W3Schools.众所周知，上面有过时或错误的信息.而是使用 Mozilla 开发者网络，它是被公认为客户端 Web 开发文档的最佳资源之一.

Lastly, do yourself a favor and don't use W3Schools. It is well known to have outdated or flat out wrong information on it. Instead use the Mozilla Developer's Network, which is recognized as one of the best resources for client-side web development documentation.

<input type="text" id="userName">
<input type="button" value="Click Me!" id="btn">
<div id="demo"></div>

<script>
  // Set up the button's click event handling function
  document.getElementById("btn").addEventListener("click", complete);
  
  // Only get a reference to the element, not its value because, at this point,
  // the user hasn't had a chance to type anything into it.
  // Also, getting a reference to the element is the best approach because, if
  // you decide you want some other property of the same element later, you'd have
  // to scan the document for the same element again.
  var theName = document.getElementById('userName');

  function complete() {
   // Now, just get the current value of the textbox at this moment in time
   document.getElementById('demo').textContent = theName.value;
  }
</script>

这篇关于javascript - 全局变量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！