Question

简单地说，我想在按下按钮时将标题中的所有值更改为“ t”，所以我有以下代码没有错误
我希望所有标题将其内容更改为“ t”

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings())

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

还请告诉我为什么上述方法不起作用

Answer 1

首先，您正在执行String str = "7"; System.out.println((int) str.charAt(0)); // Prints 55 System.out.println(Character.getNumericValue(str.charAt(0))); // Prints 7函数并将其作为事件侦听器的参数传递。其次，当您要通过元素的标记名来获取元素时，您要尝试通过名称来获取元素–为此，请使用removeHeadings。

getElementsByTagName

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings)

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByTagName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

Answer 2

您突然要调用函数removeHeadings()，您需要传递函数而不是调用它的结果。

specialButton.addEventListener('click', removeHeadings()); // Remove the parentheses
                                                      ^^

此外，您需要使用函数getElementsByTagName。

let headings = document.getElementsByName('h' + j)
                        ^^^^^^^^^^^^^^^^^^^^

函数getElementsByName通过元素中的属性name查找元素。例如：

<input type='button' name='myButton'>
                     ^^^^

函数getElementsByTagName通过HTML标记查找元素，在您的情况下为H标记，例如：

<input type='button' name='myButton'>
 ^^^^^

Answer 3

通过使用jQuery，您可以做到这一点。

HTML

<h1>S</h1>
<h2>S</h2>
<h3>S</h3>
<h4>S</h4>
<h5>S</h5>
<h6>S</h6>
<button id="change">CHANGE</button>

jQuery

$("#change").click(function change() {
    console.log("CLICKED");
    $("h1, h2, h3, h4, h5, h6").html("T");
});

JsFiddle Live Example

javascript使用嵌套的for循环动态更改网页的内容

3 个答案: