Блог

Главная - Вопросы по программированию - Как изменить идентификатор элемента в html с помощью javascript?

Как изменить идентификатор элемента в html с помощью javascript?

#javascript #html

Вопрос:

Это мой первый раз, когда я использую JavaScript. Я пытаюсь создать кнопку, на которой каждый раз, когда посетители нажимают, на ней будет отображаться еще одна дополнительная строка текста. Я часто получаю ошибку на своем JavaScript, и я не уверен, как ее исправить. Большое вам спасибо!

HTML;

 <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div class="container">
        <div class="text">
            <div class="one hide">
                One            
            </div>
            <div class="two hide">
                Two
            </div>
            <div class="three hide">
                Three
            </div>
        </div>
        <a href="#" class="button" id="hr1"></a>
    </div>
</body>
<script src="script.js"></script>
</html>

JS;

 const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = document.getELementById('hr2');
var hr3 = document.getElementById('hr3');

hr1.addEventListener('click', () => {
    one.classList.remove('hide');
    hr1.id = "hr2"; 
})

// I often get an error on hr2.addEventListener
hr2.addEventListener('click', () => {
    two.classList.remove('hide');
    hr2.id = "hr3";
})

Комментарии:

1. Потому что нет HTML — элемента, чей идентификатор hr2 и hr3 .

Ответ №1:

Ваш код выдает ошибку, потому что вы пытаетесь установить hr2 и hr3, когда они не существуют. Вам нужно установить переменные hr2 и hr3 после установки их идентификаторов, как показано ниже:

 hr1.id = "hr2"; 
hr2= document.getElementById('hr2');
 
 const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = null;
var hr3 = null;
hr1.addEventListener('click', () => {
    //one.classList.remove('hide');
    hr1.id = "hr2"; 
    hr2= document.getElementById('hr2');
    console.log(hr2);
    hr2.addEventListener('click', () => {
      two.classList.remove('hide');
      hr2.id = "hr3";
      hr3 = document.getElementById('hr3');
      console.log(hr3);
  })
})

// I often get an error on hr2.addEventListener 
     <div class="container">
        <div class="text">
            <div class="one hide">
                One            
            </div>
            <div class="two hide">
                Two
            </div>
            <div class="three hide">
                Three
            </div>
        </div>
        <a href="#" class="button" id="hr1">clickme</a>
    </div>
Метки: