Question

我是初学者，我在这里创建了一个事件监听器，它有效：

var inpt = document.getElementsByTagName('input')[0];

plus.addEventListener("click", function() {
  if(inpt.style.display === 'none'){
    inpt.style.display = 'block';
  } else {
    inpt.style.display = 'none';
  }
});

但是当我将'inpt.style.display'的值分配给变量并重试时，它不起作用：

var inpt = document.getElementsByTagName('input')[0];

plus.addEventListener("click", function() {
 var disp = inpt.style.display;
 if(disp === 'none'){
   disp = 'block';
 } else {
   disp = 'none';
 }
});

为什么这不起作用？谢谢！

Answer 1

您没有为style属性设置display，但只需为变量disp设置新值...

disp是一个指向原始值的变量，这意味着它不知道是＆＃34;连接＆＃34;到inpt.style.display，所以当您更改disp变量时，它永远不会影响inpt.style.display。

如果它指向一个Object，它可能只会影响它，例如：

var disp = inpt.style; // style is an Object which has the "display" property

您必须直接更改display属性：

inpt.style.display = 'block';

等等。

试试这个：

var inpt = document.querySelector('input'); // changed to "querySelector"

plus.addEventListener("click", function() {
    inpt.style.display = inpt.style.display === 'none' ? 'block' : 'none';
});

Answer 2

该变量是一个字符串，因此当您创建一个新变量时，您只需获取一个字符串的副本，并且不要覆盖旧值。试试这个：

var a = "123"
var b = a;
var b = "something else"

现在检查b和a的值。你会看到a没有改变。

Answer 3

您正在复制inpt.style.display中的值。这是一个价值，而不是一个参考。重新分配它不会改变原始值。

let testObject = { testField: "hello" };
let testField = testObject.testField;
testField = "goodbye";
console.log(testObject.testField); // "hello"

您可以在此答案中找到更多信息：Javascript by reference vs. by value

DOM节点“显示”样式变量指针不更新样式

3 个答案:

试试这个：