Question

我有两个按钮，其中绿色按钮点击，因此+1计数并显示不显示值，直到按下红色按钮但它没有发生但是当我点击绿色按钮时值存储，但显示也是，只有在按下红色按钮时才会显示该值。

任何提示或帮助都会受到很多赞赏

 var clicks = 0;
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }

.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }

 <html>
 <head>



   <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></div>

</body></html>

Answer 1

您必须首先通过display:none

隐藏该div

var clicks = 0;
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
   //alert(visibility);
 document.getElementById(id).style.display = visibility;
 }

.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }

#sub3{
  display: none;
}

<input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'block');";>
  <br><br><br><div id="sub3"> <p id="clicks"></p></div>

Answer 2

var clicks = 0;
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }

.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }

#sub3 {   /* this was the missing part */
  display: none;
}

<input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></p></div>

Answer 3

在html中调用setVisibility("sub3","none"); onload或设置none的可见性。

 var clicks = 0;
setVisibility("sub3","none");
 function clickME() {
     clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  }
 function setVisibility(id, visibility) {
 document.getElementById(id).style.display = visibility;
 }

.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }

 <html>
 <head>



   <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility('sub3',    'inline');";>
  <br><br><br><div id="sub3"> <p id="clicks"></div>

</body></html>

Answer 4

只需使用样式表

将sub3的初始可见性设置为无

#sub3
{
display:none;
}

或内联<div id="sub3" style="display:none"> <p id="clicks"></p></div>

Answer 5

<html>
 <head>
 <style>
.grow:active
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
 }</style>


<script>
 var clicks = 0;
 function clickME() {
     clicks += 1;


  }
 function setVisibility() {
 document.getElementById("clicks").innerHTML = clicks;
 }
 </script>
 <input type="image" class="grow" src="green.jpg" onClick="clickME()">
<img src="red.jpg" type="button" name="type"  onclick="setVisibility()";>
  <br><br><br><div id="sub3"> <p id="clicks"></p></div>

</body>

</html>

对隐藏元素感到困惑

5 个答案: