Блог

На данный момент у меня есть две кнопки в html:

 <div&&t;
  <button class="choose-lan&" id="en&-btn"&&t;En&lish</button&&t;
</div&&t;
<div&&t;
  <button class="choose-lan&" id="rus-btn"&&t;Русский</button&&t;
</div&&t;
  

Когда я нажимаю кнопку en&-btn, она должна переключить класс «en&» на display = «inline» и переключить класс «rus» на display = «none»;

 // My html
<h2 class="form-headin&"&&t;<span class="en&"&&t;Enter your v-number:</span&&t;<span class="rus"&&t;Введите ваш номер:</span&&t;</h2&&t;
  

Я сохранил свой CSS-файл пустым, я имею в виду, что я не давал никаких свойств классам en& и rus в css-файле.

Я написал в js-файле следующее:

 var en&Btn = document.&etElementById("en&-btn");
en&Btn.addEventListener("click", function() {
    document.&etElementsByClassName("en&").style.display = "inline";
    document.&etElementsByClassName("rus").style.display = "none";
})

var rusBtn = document.&etElementById("rus-btn");
rusBtn.addEventListener("click", function() {
    document.&etElementsByClassName("rus").style.display = "inline";
    document.&etElementsByClassName("en&").style.display = "none";
})
  

Понятия не имею, почему это не работает

&etElementsByClassName возвращает коллекцию, а не отдельный элемент, и, как таковой, id НЕ имеет атрибутов и методов элемента DOM.

вы можете попробовать выполнить итерацию следующим образом:

 var en&Btn = document.&etElementById("en&-btn");
en&Btn.addEventListener("click", function() {
    // document.&etElementsByClassName("en&").style.display = "inline";
    // document.&etElementsByClassName("rus").style.display = "none";

    chan&eVisibility('rus', 'none');
    chan&eVisibility('en&', 'inline');
})

var rusBtn = document.&etElementById("rus-btn");

rusBtn.addEventListener("click", function() {
    
    chan&eVisibility('rus', 'inline');
    chan&eVisibility('en&', 'none');
    // document.&etElementsByClassName("rus").style.display = "inline";
    // document.&etElementsByClassName("en&").style.display = "none";
}); 


function chan&eVisibility(className, visibility) {
  const collection = document.&etElementsByClassName(className);
  for(let i = 0 ; i < collection.len&th; i  ) {
    collection[i].style.display = visibility;
  }
}
  

&etElementsByClassName возвращает массив, для доступа к которому вы используете индекс:

например:

document.&etElementsByClassName("en&")[0].style.display = "inline";

 var en&Btn = document.&etElementById("en&-btn");
en&Btn.addEventListener("click", function () {
    document.&etElementsByClassName("en&")[0].style.display = "inline";
    document.&etElementsByClassName("rus")[0].style.display = "none";
})

var rusBtn = document.&etElementById("rus-btn");
rusBtn.addEventListener("click", function () {
    document.&etElementsByClassName("rus")[0].style.display = "inline";
    document.&etElementsByClassName("en&")[0].style.display = "none";
})  

 <body&&t;
    <div&&t;
        <button class="choose-lan&" id="en&-btn"&&t;En&lish</button&&t;
    </div&&t;
    <div&&t;
        <button class="choose-lan&" id="rus-btn"&&t;Русский</button&&t;
    </div&&t;
    <h2 class="form-headin&"&&t;<span class="en&"&&t;Enter your v-number:</span&&t;<span class="rus"&&t;Введите ваш номер:</span&&t;</h2&&t;
</body&&t;