Использование Javascript для изменения текстового содержимого кнопки

#javascript #dom #event-handling

#javascript #dom #обработка событий

Вопрос:

Привет, ребята, я создаю приложение для обмена сообщениями в социальных сетях, и прямо сейчас я изучаю основы создания кнопки для подписки на людей.

Когда вы нажимаете на кнопку, она должна изменить надпись на кнопке с надписи «Следовать» на «Отменить подписку». Тогда счетчик подписчиков должен увеличиться на 1.

Пока это мой код, и он ничего не делает. Я не получаю никаких ошибок, но это также вообще ничего не делает.

Может кто-нибудь понять, что я делаю не так? Спасибо

network.js:

    document.addEventListener('DOMContentLoaded', function() {

  document.getElementById('followButton').addEventListener('click', () => follow_user());
  
});

function follow_user() {
    const element = document.getElementById('followButton');
    element.value = "Un-Follow";
    const element2 = document.getElementById('followers');
    element2.textContent  = 1;
}

profile.html :

 {% extends "network/layout.html" %}
{% block body %}

  <h2>{{user.username}}'s Profile</h2>
  <p id="followers">Followers: {{user.followers}}</p>
  <p>Follows: {{user.follows}}</p>
  {% for newquery in newqueries reversed %}
            <div class="newpost"><p>{{ newquery.body }}</p><p>By: {{ newquery.username }} on: {{ newquery.timestamp }} Likes: {{ newquery.likes }}</p></div>
{% endfor %}
<input type="button" value="Follow" id="followButton">
{% endblock %}

1. Я не уверен, но быстро просмотрел ваш код своими глазами, и я смог увидеть проблему здесь: const element2 = document.getElementById(‘followers’); вы пытаетесь получить доступ к элементу с идентификатором ‘followers’, но когда вы смотрите на свою HTML-разметку, такого элемента с таким идентификатором нет,Я вижу, что вместо этого вы используете class=»followers», поэтому попробуйте изменить его.

2. Я обновил код, как вы можете видеть выше, и он по-прежнему ничего не делает.

Ответ №1:

Ваша первая проблема заключается в том, что у вашего количества подписчиков нет идентификатора. Вы пытаетесь настроить таргетинг на него #followers , но у него есть только класс .followers .

Ваша вторая проблема заключается в том, что вводимые кнопки не отображают textContent . Они отображают их значение.

 const element = document.getElementById('followButton');
element.value = "Un-Follow";

1. я обновил приведенный выше код, и он по-прежнему ничего не делает.

2. Возможно, проблема в чем-то другом, вы уверены, что в консоли разработчика нет ошибок? Здесь у вас также есть проблема: document.getElementById(‘followButton’) это должен быть getElementById, а не getElementById. вы написали Id all в верхнем регистре.

3. Хорошо, я тоже это изменил — по-прежнему ничего. Как это может быть? Я использовал его раньше. Как я могу быть уверен, что он использует network.js файл?

4. {% block script %} <script src=»{% static’../../static/network/network.js ‘ %}»></script> {% endblock %} <— это на моем layout.html страница

5. Попробуйте заглянуть в консоль разработчика и посмотреть, какие ошибки вы получаете, потому что предыдущие ошибки, из-за которых ваш код перестал выполняться. Также мы не можем помочь с шаблонизатором здесь, потому что нет простого способа воспроизвести вашу проблему, и проблема может быть где-то в другом месте.

Ответ №2:

Попробуйте что-то вроде этого: const element = document.getElementById(«followButton»).value=»Un-Button Follow» я думаю, что значение должно быть Button между un и follow, т.е. un-follow, обратите внимание (измените его в соответствии с вашим кодом) Проверьте эту статью здесь: https://www.permadi.com/tutorial/jsInnerHTMLDOM/index.html