我的功能不起作用？

Question

我试图隐藏chatname div和时隐时现把chatid在这底部在64px的，但其给我一个错误说

toggle 3(); 没有定义的

 <div id="chatdiv">
    <div id='chatid' onclick="toggle3();">
        <div id="chatname">
        </div>
     </div>
 </div>

---

var toggle3 = function() {
var mydiv3 = document.getElementById('chatid');
var mydiv4 = document.getElementById('chatname');
if (mydiv4.style.height === '0px' || mydiv4.style.height === '' )
mydiv4.style.height = '516px';
mydiv3.style.top = "64px"

else
mydiv4.style.height = '0px'
mydiv3.style.top = "auto"

}

Answer 1

我不确定，但看来您想这样做

  <div id="chatdiv"> <div id='chatid' onclick="toggle3();" > <div id="chatname"> </div> </div> </div> 

var toggle3 = function() 
{
console.log(this.id);
var mydiv3 = document.getElementById('chatid');
var mydiv4 = document.getElementById('chatname');
if (mydiv4.style.height === '0px' || mydiv4.style.height === '' )
{
mydiv4.style.height = '516px';
mydiv3.style.top = "64px"
}
else
{
mydiv4.style.height = '0px'
mydiv3.style.top = "auto"
}
}

如果在else块中存在多个表达式，则必须使用代码块将javascript代码包含在脚本标记之外。

Answer 2

正如人们在对您的问题的评论中提到的那样，您的代码有很多语法错误，您应该能够在浏览器的控制台中看到这些错误，这表明这行是错误的。 以下是对您的代码更正确的验证：

'use strict';
var toggle3 = function() {
  var mydiv3 = document.getElementById('chatid');
  var mydiv4 = document.getElementById('chatname');
  if (mydiv4.style.height === '0px' || mydiv4.style.height === '' ) {
    mydiv4.style.height = '516px';
    mydiv3.style.top = "64px";
  } else {
    mydiv4.style.height = '0px';
    mydiv3.style.top = "auto";
  }
}

如果if块中有1条以上的语句，则始终需要使用{ // code statements here ... }在语句周围创建一个块

 'use strict'; var toggle3 = function() { var mydiv3 = document.getElementById('chatid'); var mydiv4 = document.getElementById('chatname'); if (mydiv4.style.height === '0px' || mydiv4.style.height === '' ) { mydiv4.style.height = '516px'; mydiv3.style.top = "64px"; } else { mydiv4.style.height = '0px'; mydiv3.style.top = "auto"; } } 

 div { padding: 5px; margin: 5px; } #chatdiv { background-color: red; } #chatid { background-color: orange; } 

  <div id="chatdiv"> <div id='chatid' onclick="toggle3();"> <div id="chatname"> Name </div> </div> </div> 

但是，您所需要做的事情可能要简单得多？ 为什么不在父div上设置一个类并隐藏基于该父类的元素呢？ 无需更改高度和其他内容，只需更改父div的类，然后可以通过css更改处理生成的高度/宽度/可见性更改

function toggle3( sourceElement, classToToggle ) {
  var target = document.getElementById( sourceElement );
  target.classList.toggle( classToToggle );
}

 function toggle3( sourceElement, classToToggle ) { var target = document.getElementById( sourceElement ); target.classList.toggle( classToToggle ); } 

 .active-chat-box { } #chatid.active-chat-box { height: 516px; width: auto; background-color: yellow; } .active-chat-box > #chatname { background-color: orange; } 

 <div id="chatdiv"> <div id='chatid' class="active-chat-box" onclick="toggle3('chatid', 'active-chat-box');"> <div id="chatname"> Name </div> </div> </div>