Question

＆＃13;

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

＆＃13;

<button onclick="myFunction()">Try it</button>
<div id="myDIV">
  This is my DIV element.
</div>

＆＃13;

我在W3Schools上找到了这个代码并替换了＃34; myDIV＆＃34;用＆＃34; h3＆＃34;所以我可以更改标题中的文字

    <div class="speech-buble-top"><h3 id="h3"> Happy Birthday Tiffany!</h3></div>

Answer 1

没有脚本标签添加javascript标签。

<script type="text/javascript"> your code </script>

Answer 2

您的JS功能必须在之前声明按钮。并且必须附在<script> </script>标记

中

Answer 3

问题源于您使用function关键字声明该功能。通常这很好，但我发现使用HTML调用的javascript函数作为已分配给变量的函数更容易。如果您使用ES6箭头语法，您将使用最新标准并将函数绑定到变量。尝试重写功能代码，如下所示：

<script>
  myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
   }
}
</script>
<button onclick="myFunction()">Try it</button>
<div id="myDIV" style="display: none">
  <h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>

Answer 4

如果您尝试在网页中内嵌代码，那么您需要确保对所使用的代码类型进行分类。 <style></style>用于CSS，<script></script>用于Javascript。

您似乎正在尝试执行简单的隐藏/显示脚本。您应该做的一件事是代码的效率。您问题中的粗略代码可以缩短为：

＆＃13;

function toggleHide() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("hide");
}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<button onclick="toggleHide()">Try it</button>
<div id="myDIV">This is a DIV element.</div>

＆＃13;

以下是内联的内容：

<style>
.hide {
    display: none;
}
</style>

<button onclick="myFunction()">Try it</button>
<div id="myDIV">This is a DIV element.</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("hide");
}
</script>

Answer 5

您可以使用var x = document.getElementById("myDIV"); document.getElementById("myBtn").addEventListener('click', function() { if (x.style.display == "none") { x.style.display = "block"; } else { x.style.display = "none"; } });内联HTML #myDIV { border: 1px solid black; padding: 3px; }。试试这个：

＆＃13;

<button type="button" id="myBtn">Show</button>
<div id="myDIV" style="display: none;">Show the content</div>

＆＃13;

x.style.display

＆＃13;

INSERT

＆＃13;

请注意INSERT into language (language_id,name,last_update) VALUES ('1','English','2006-02-15 05:02:19.000'), ('2','Italian','2006-02-15 05:02:19.000'), ('3','Japanese','2006-02-15 05:02:19.000'), ('4','Mandarin','2006-02-15 05:02:19.000'), ... ;检测内联样式HTML属性。如果您使用单独的css文件来设置div的样式，那么您第一次需要两次点击...

当我点击它时，为什么我的按钮不能执行该功能。它应该切换文本

5 个答案: