Show/Hide onClick button not working

Question

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

У меня будет две кнопки. Первая кнопка (show_Chappie) покажет скрытое содержимое и другую кнопку (hide_Chappie) и скрывает ее при нажатии.

Вторая кнопка (hide_chappie) скроет содержимое и вернет первую кнопку (show_chappie). Сама кнопка hide_chappie также будет скрыта.

Информация div уже скрыта с самого начала. Я сделал это на CSS с помощью дисплея: none;

Вот мой HTML код до сих пор:

<button class ="show_chappie" onclick="showInfo()">Show More</button> 
<div class="info">Info here.</div> 
<button class ="hide_chappie" onclick="hideInfo()">Show Less</button> 

Вот мой JavaScript код до сих пор:

function showInfo(){ 

       document.getElementById('chappie_info').style.display = "inline-block"; 
       document.getElementById('show_chappie').style.display = "none"; 
       document.getElementById('hide_chappie').style.display = "inline-block"; 

      } 

я не написал код для кнопки hide_chappie, потому что я хотел бы видеть эту работу первый.

Итак, где я здесь не так? Спасибо за помощь заранее.

Answer 1

Вы пытаетесь получить элементы по id в то время как они имеют class, вы должны изменить элементы class к id так:

<button id="show_chappie" onclick="showInfo()">Show More</button> 
<div id="info">Info here.</div> 
<button id="hide_chappie" onclick="hideInfo()">Show Less</button> 

Answer 2

вы должны изменить свой код:

<button id ="show_chappie" onclick="showInfo()" >Show More</button> 
<div class="info">Info here.</div> 
<button id= "hide_chappie" onclick="showInfo()">Show Less</button> 

, если вы хотите использовать класс здесь, вы должны изменить свой Javascript Code на

function showInfo(){ 

       document.getElementByClass('chappie_info')[0].style.display = "inline-block"; 
       document.getElementByClass('show_chappie')[0].style.display = "none"; 
       document.getElementByClass('hide_chappie')[0].style.display = "inline-block"; 

      } 

потому что функция getElementsByClass возвращает коллекцию, поэтому вы должны добавить [], чтобы узнать результат, который вы хотите!

Answer 3

Это вид раздражает, чтобы превратить все идентификаторы в классы, вы можете использовать:

function showInfo(){ 

    document.getElementsByClassName('chappie_info').style.display = "inline-block"; 
    document.getElementsByClassName('show_chappie').style.display = "none"; 
    document.getElementsByClassName('hide_chappie').style.display = "inline-block"; 

} 

---

Это поддерживается практически каждый браузер в эти дни, так что я бы не беспокоиться об этом. Если это все еще проблема, вам необходимо поддерживать старые браузеры, используйте это:

document.getElementsByClassName = function (a) { 
    var b = document.getElementsByTagName('*'), i, c=[]; 
    for (i = 0; i < b.length; i += 1) { b[i].getAttribute('class')===a&&c.push(b[i]); } 
    return c; 
};