Как изменить текст HTML, используя код Js?

Question

Я уже Google, поэтому, пожалуйста, не говорите мне Google, потому что я не могу понять, что я сделал неправильно.Когда я нажимаю кнопку Submit , на сайте ничего не происходит.

Вот мой HTML файл:

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>

<script>
    function runThis() {
        var getTextID = document.getElementsByTagName("apples");
        getTextID = "Hello guys";
    }
</script>

Пользователь Mac, кстатиесли это имеет какое-то значение.

Answer 1

    function runThis(){
        document.getElementById("apples").innerHTML = "Problem solved ";
    }

Answer 2

Метод, который вы используете, getElementsByTagName, возвращает элементы с именем тега, а не один элемент с идентификатором, подобным тому, который вы хотите.Чтобы исправить эту часть проблемы, добавьте, используйте вместо этого getElementById:

var getTextID = document.getElementById("apples");

Во-вторых, вам нужно заменить внутренний текст элемента, а не сам элемент, поэтому вы должны использовать innerText:

getTextID.innerText = "Hello guys";

Полностью рабочая демонстрация:

function runThis() {
    var getTextID = document.getElementById("apples");
    getTextID.innerText = "Hello guys";
}

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>

Надеюсь, это поможет!

Answer 3

Вы также можете использовать querySelector & innerHTML.

function runThis() {
    var getTextID = document.querySelector("#apples");
    getTextID.innerHTML = "Hello guys";
}

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>

Пожалуйста, проверьте больше здесь о getElement * и querySelector *: https://javascript.info/searching-elements-dom

Answer 4

Вы используете неправильный селектор.getElementsByTagName() будет искать имя тега элемента h1 , а не ID .

Замените ваш селектор запросов на document.getElementById("apples"), и для установки нового контента вы можете использовать getTextID.textContent = "Hello guys";

Вот пример JsFiddle

function runThis() {
  var getTextID = document.getElementById("apples");
  getTextID.textContent = "Hello guys";
}

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже, и я перезвоню вам как можно скорее.

Надеюсь, это поможет,Удачного кодирования!

Answer 5

Попробуйте использовать это;document.getElementById("apples")

Answer 6

Прежде всего, яблоки - это не имя тега, это id элемента.Имя тега: h1 .

Затем getElementsByTagName() возвращает набор.Вы должны использовать определенный index , например:

getElementsByTagName('h1')[0]

Хотя это должно быть getElementsById(), поскольку вы пытаетесь получить элемент с атрибутом id .Кроме того, getTextID относится к самому элементу, вы должны использовать свойство textContent или innerText для установки текста в элементе.

Попробуйте следующим образом:

function runThis(){
    var getTextID = document.getElementById("apples");
    getTextID.textContent = "Hello guys";
}

<button onclick="runThis()">Submit</button>
<h1 id="apples">Hello</h1>