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

到目前为止，我已经尝试过这个，但它不起作用。如果我在这行

var x=document.getElementsByTagName（“footer”）中将页脚更改为div比它显示了我代码中的所有div，我也不想这样

有人能告诉我这段代码有什么错误，以及如何让这段代码正常工作吗？

HTML

<p> name:</p> <div> john</div>
<p> class: </p> <div> English</div>
<p> email: </p> <div> some@gmail.com</div>
<footer>
    <button onclick="show()">Contact</button>
    <p id="first"></p>
    <p id="second"></p>
    <p id="third"></p>
</footer>

您有一些错误：

你只有一个页脚，我猜你想得到所有div的内容。
您的id是错误的，“firstHere”不存在，但“first”存在，第二个和第三个id也是如此

更新：您可以将一个类添加到您的div中（如果页面中有其他div，但您想忽略它们）

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

试试这个：


函数显示（）{
var x=document.queryselectoral（“您的类”）；
document.getElementById（“first”）.innerHTML=
'第一个div:'+x[0].innerHTML；
document.getElementById（“第二个”）.innerHTML=
'第二个div:'+x[1].innerHTML；
document.getElementById（“第三个”）.innerHTML=
“第三个div:”+x[2]。innerHTML；
}
姓名：
约翰
班级：
英语
电子邮件：
some@gmail.com
接触



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;
}

这里是
的手册，我也尝试过这个，我不想要这个，因为我的代码中也有其他div。然后在div中添加一个类你可以在div中添加一些
class
或
id
？否则，将使用以下代码返回所有div-
document.getElementsByTagName（“div”）是，id不相同。我已经更新了问题。使用div会导致问题，因为我的代码中也有其他div，如何处理？
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;
}