如何使用 JavaScript 在按钮单击时显示内容

Question

到目前为止，我已经尝试过这个，但它不起作用。如果我在这一行中将页脚更改为 div，而var x = document.getElementsByTagName("footer");不是在我的代码中显示所有 div，我也不想要这个。谁能帮助我告诉我这段代码有什么问题以及如何使这段代码正常工作？HTML<p> name:</p> <div> john</div><p> class: </p> <div> English</div><p> email: </p> <div> [e-mail]</div><footer>    <button onclick="show()">Contact</button>    <p id="first"></p>    <p id="second"></p>    <p id="third"></p></footer>JSfunction show() {    var x = document.getElementsByTagName("footer");    document.getElementById("first").innerHTML =    'first div: ' + x[0].innerHTML;    document.getElementById("second").innerHTML =    'second div: ' + x[1].innerHTML;    document.getElementById("third").innerHTML =    'third div: ' + x[2].innerHTML;    }

Answer 1

你有一些错误：

你只有一个页脚，我猜你想获取所有 div 的内容。您的 id 错误，“firstHere”不存在，但“first”存在，第二个和第三个 id 相同。

更新：您可以向您的 div 添加一个类（如果您在页面中有另一个 div 但您想忽略它们）。

要获取多个元素，您还可以使用querySelectorAll，使用 css 选择器作为参数。

试试这个：

function show() {

    var x = document.querySelectorAll(".your-class");

    document.getElementById("first").innerHTML =

    'first div: ' + x[0].innerHTML;

    document.getElementById("second").innerHTML =

    'second div: ' + x[1].innerHTML;

    document.getElementById("third").innerHTML =

    'third div: ' + x[2].innerHTML;

    }

<p> name:</p> <div class="your-class"> john</div>

<p> class: </p> <div class="your-class"> English</div>

<p> email: </p> <div class="your-class"> [e-mail]</div>

<footer>

    <button onclick="show()">Contact</button>

    <p id="first"></p>

    <p id="second"></p>

    <p id="third"></p>

</footer>

Answer 2

document.getElementById需要的参数与你在html中的id相同

在这里如何做到这一点：

function show() {

    var x = document.getElementsByTagName("div");

    document.getElementById("first").innerHTML =

    'first div: ' + x[0].innerHTML;

    document.getElementById("second").innerHTML =

    'second div: ' + x[1].innerHTML;

    document.getElementById("third").innerHTML =

    'third div: ' + x[2].innerHTML;

}

这里是document.getElementById的手册