试图用按钮切换类的可见性（使用Javascript），绝对没有用，我错过了什么？ [英] Trying to toggle visibility of classes with buttons (using Javascript), absolutely nothing works, what am I missing?

问题描述

我想设置一个页面，通过按钮切换页面上某些元素的可见性，但由于某些原因，我的代码被忽略/完全没有任何作用。

在使用ID时，我可以得到这个工作，但是只有页面上ID的第一个实例被改变，而其余的被忽略。有了类，什么都没有发生。

我确定我在这里错过了一些基本的东西，但我无法弄清楚什么。请检查以下内容：

function georgianInfo（）{document.getElementByClassName（georgian ）.style.display =block; document.getElementByClassName（international）。style.display =none;} function internationalInfo（）{document.getElementByClassName（georgian）。style.display =none; document.getElementByClassName（international）。style.display =block;}

  .georgian {display：none;}。international {display：block;}  

 < form>< input type =buttononClick =georgianInfo（）value =georgian students>< / form>< form>< input type =buttononClick =internationalInfo（）value =international students>< / form>< h4 class =margin-rmv> Admissions Information< / h4>< h5 class =georgian >格鲁吉亚学生招生信息< / h5>< h5 class =international>国际学生招生信息< / h5>  

请参阅codepen： https：// codepen。 io / escapetomars / pen / vxBLgg

解决方案

更改拼写o document.getElementsByClassName 。

>返回一个数组/元素列表。所以你必须引用正确的索引。

引用代码：

  function georgianInfo（）{document.getElementsByClassName（georgian）[0] .style.display =block; document.getElementsByClassName（international）[0] .style.display =none;} function internationalInfo（）{document.getElementsByClassName（georgian）[0] .style.display =none; document.getElementsByClassName（international）[0] .style.display =block;}  

  .georgian {display：none;}。international {display：block;}  

 < table class =tab-menucellspacing =0cellpadding =0> < TR> < TD> < form>< input type =buttononClick =georgianInfo（）value =for georgian students>< / form> < / TD> < TD> < form>< input type =buttononClick =internationalInfo（）value =for international students>< / form> < / TD> < / table>< h4 class =margin-rmv>招生信息< / h4>< h5 class =georgian>格鲁吉亚学生招生信息< / h5>< h5 class =international>国际学生入学资讯< / h5>  

b
$ b

我建议您阅读 MDN文章 Document.getElementsByClassName 以更好地理解构造。

I want to set up a page where the visibility of certain elements on a page are toggled by buttons, but for some reason, my code is simply ignored / does absolutely nothing.

I can get this to work when using ID's, but then only the first instance of the ID on the page gets changed while the rest are ignored. With classes, nothing happens.

I'm sure I'm missing something basic here, but I can't figure out what. Please check below:

function georgianInfo() {
  document.getElementByClassName("georgian").style.display = "block";
  document.getElementByClassName("international").style.display = "none";
}

function internationalInfo() {
  document.getElementByClassName("georgian").style.display = "none";
  document.getElementByClassName("international").style.display = "block";
}

.georgian {
  display: none;
}

.international {
  display: block;
}

<form><input type="button" onClick="georgianInfo()" value="georgian students"></form>

<form><input type="button" onClick="internationalInfo()" value="international students"></form>

<h4 class="margin-rmv">Admissions Information</h4>

<h5 class="georgian">Georgian Students Admissions Information</h5>

<h5 class="international">International Students Admissions Information</h5>

Refer codepen: https://codepen.io/escapetomars/pen/vxBLgg

解决方案

Change the spelling of document.getElementsByClassName.

Also, document.getElementsByClassName returns an array/list of elements. So you have to refer it with the correct index.

Refer code:

function georgianInfo() {
  document.getElementsByClassName("georgian")[0].style.display = "block";
  document.getElementsByClassName("international")[0].style.display = "none";
}

function internationalInfo() {
  document.getElementsByClassName("georgian")[0].style.display = "none";
  document.getElementsByClassName("international")[0].style.display = "block";
}

.georgian {
  display: none;
}

.international {
  display: block;
}

<table class="tab-menu" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <form><input type="button" onClick="georgianInfo()" value="for georgian students"></form>
    </td>
    <td>
      <form><input type="button" onClick="internationalInfo()" value="for international students"></form>
    </td>
  </tr>
</table>

<h4 class="margin-rmv">Admissions Information</h4>

<h5 class="georgian">Georgian Students Admissions Information</h5>

<h5 class="international">International Students Admissions Information</h5>

I would suggest you to go through the MDN article regarding Document.getElementsByClassName for a better understanding of the construct.

这篇关于试图用按钮切换类的可见性（使用Javascript），绝对没有用，我错过了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！