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

Question

到目前为止，我已经尝试过了，但是没有用。如果我在此行var x = document.getElementsByTagName("footer");中将页脚更改为div，而不是在我的代码中显示所有div，则我也不希望这样做。

任何人都可以通过告诉我这段代码有什么问题以及如何使这段代码起作用来帮助我吗？

HTML

<p> name:</p> <div> john</div>
<p> class: </p> <div> English</div>
<p> email: </p> <div> [email protected]</div>
<footer>
    <button onclick="show()">Contact</button>
    <p id="first"></p>
    <p id="second"></p>
    <p id="third"></p>
</footer>

JS

function 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，但您想忽略它们）试试这个

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"> [email protected]</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的手册