Javascript 使用DOM隐藏和显示

我试图制作一个简单的隐藏和显示脚本，它与HTML代码分离。但我不能让它工作。任何人 HTML:

JavaScript
点击
Adöfkljg ldjfögj jsdflkgjh kjdflkgjh dfgkjdöjg
点击
dfghödifgjöoeirugeöori dijfoidj oidoi odi

JS:

var text=document.getElementsByClassName（“text”）；
var butt=document.getElementsByClassName（“按钮”）；
window.onload=start（）；
函数start（）{
对于（i=0；i，您的代码存在一些问题：

如果（text[i].style.visibility=“hidden”）
始终为真，则应为：

if（text[i].style.visibility==“hidden”）

以下代码：

butt[i].onclick = function (){
  if (text[i].style.visibility = "hidden"){
    text[i].style.visibility = "visible";
  } else {
    text[i].style.visibility = "hidden"
  };
};


已超出
for
循环，因此未定义
i
，并且当您进入函数时（以后单击）
i
将不会被定义。因此，我将事件侦听器移动到按钮声明

我已经解决了问题，并且

基本上，您可以查看新代码并将其与原始代码进行比较。
您似乎开始使用Javascript和HTML进行编码。在这种情况下，我建议您将jQuery视为DOM操作的坚实框架。使用jQuery回答您的问题：

$(function(){
    $('.text').hide();    
    $('button').click(function(){
        $(this).next('.text').toggle()
    });
});

工作JSFIDLE:
非常感谢您的回答，但仍有一些事情我不明白。console.log为什么以及如何解决这个问题？别介意console.log，这只是我做的一个测试。您可以删除它。OP提出了一个关于“与HTML代码分离的脚本”的问题.Doing
是JS和HTML的糟糕组合，应该避免。你是对的，但他不使用jQuery，问题也不标记为jQuery。没有它，这种方式就不那么“糟糕”Delal，我希望我的解决方案有助于了解您的错误所在。我同意@lukaszfiszer的观点，即您应该学习jQuery，它是一个很好的、干净的DOM操作框架，等等。
butt[i].onclick = function (){
  if (text[i].style.visibility = "hidden"){
    text[i].style.visibility = "visible";
  } else {
    text[i].style.visibility = "hidden"
  };
};

$(function(){
    $('.text').hide();    
    $('button').click(function(){
        $(this).next('.text').toggle()
    });
});