как показать контент при нажатии кнопки с помощью 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> some@gmail.com</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. Ваши идентификаторы неверны, «firstHere» не существует, но «first» существует, то же самое для второго и третьего идентификаторов.

ОБНОВЛЕНИЕ: Вы можете добавить класс в свои 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"> some@gmail.com</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

Вот как это сделать:

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

Здесь руководство для документа. getElementById