Javascript 不工作答案

【问题标题】：Javascript Not WorkingJavascript 不工作
【发布时间】：2014-11-17 18:35:16
【问题描述】：

当 texbox 中的文本发生更改时，我正在使用 Javascript 来显示一个 div。这是使用引导框架。但我似乎无法让它工作。

function myFunction() {
  var ele = document.getElementById("auto");
  if (this.value==" " || this.value=="") {
    ele.style.display = "none";
  } else {
    ele.innerHTML = "chuckbeyor101@hotmail.com<br>josh@computersbyjd.com";
    ele.style.display = "block";
  }		
}

<tr>
  <td>
    <b>Customer Information</b>
  </td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Email:</td>
  <td></td>
  <td>
    <input type="text" name="email" onkeyup="myFunction()">
    <div style="display: none" id="auto">
      Test Div
    </div>
  </td>
</tr>

【问题讨论】：

PHP 在这里无关紧要，为什么要使用 jQuery 标签？发布呈现的 HTML。另外，您是否尝试过调试代码？您在浏览器的控制台中遇到什么错误？
@Oriol 我不建议您在编辑中修复 OPs 代码。那么问题就变得不清楚了。请改为发布答案。
@showdev 我没有修复代码。我刚刚摆脱了无关的PHP，分离了html和js，并改进了格式。
@Oriol 我的错误。我错误地认为问题的一部分是 javascript 函数的位置（未找到函数）。

标签： javascript html twitter-bootstrap

【解决方案1】：

问题是myFunction里面，this不再是event.currentTarget。相反，它会在非严格模式下为window，或在严格模式下为undefined。

您可以手动修复设置 this 的值，例如使用call:

onkeyup="myFunction.call(this)"

function myFunction() {
  var ele = document.getElementById("auto");
  if (this.value==" " || this.value=="") {
    ele.style.display = "none";
  } else {
    ele.innerHTML = "chuckbeyor101@hotmail.com<br>josh@computersbyjd.com";
    ele.style.display = "block";
  }		
}

<tr>
  <td>
    <b>Customer Information</b>
  </td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Email:</td>
  <td></td>
  <td>
    <input type="text" name="email" onkeyup="myFunction.call(this)">
    <div style="display: none" id="auto">
      Test Div
    </div>
  </td>
</tr>

但最好使用addEventListener 并摆脱内联事件处理程序：

document.getElementsByName('email')[0].addEventListener('input', function() {
    // Your code here.
});

注意我使用了input 事件，因为输入可以通过键盘以外的其他方式进行更改。

var ele = document.getElementById("auto");
document.getElementsByName('email')[0].addEventListener('input', function() {
  if (!this.value.trim()) {
    ele.style.display = "none";
  } else {
    ele.innerHTML = "chuckbeyor101@hotmail.com<br>josh@computersbyjd.com";
    ele.style.display = "block";
  }		
});

#auto {
  display: none;
}

<tr>
  <td>
    <b>Customer Information</b>
  </td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Email:</td>
  <td></td>
  <td>
    <input type="text" name="email">
    <div id="auto">
      Test Div
    </div>
  </td>
</tr>

【讨论】：

我喜欢你的回答，它们在 sn-ps 中工作，但在我的站点中却没有。是否与我使用引导带或我的页面是 .php 有关？
没关系，明白了！谢谢！

【解决方案2】：

问题是this 在调用事件处理程序时指向全局对象，就像在您的代码中一样。您可以将输入元素对象传递给函数，以便能够读取value 属性：

<input type="text" name="email" onkeyup="myFunction(this)">

和javascript：

function myFunction(obj) {
    var ele = document.getElementById("auto");
    if (obj.value == " " || obj.value == "") {
        ele.style.display = "none";
    } else {
        ele.innerHTML = "<?php echo $clients?>";
        ele.style.display = "block";
    }
}

【讨论】：

【解决方案3】：

如果你想要这个，并且避免在你的 html 中插入 JavaScript，你应该使用事件监听器

    var ele = document.getElementById("auto");
    document.getElementById('keyup').addEventListener('keyup', function (e) {
      if (this.value.trim()) {
        ele.style.display = "none";
      } else {
        ele.text = "<?php echo $clients?>";
        ele.style.display = "block";
      } 
    });

html:

<input type="text" name="email" id="keyup">
<div style="display: block" id="auto">Test Div</div>

【讨论】：

【解决方案4】：

看起来您在 if else 条件语句之后缺少“文本”属性。尝试一下，看看问题是否仍然存在。

【讨论】：