关于javascript“onclick”的基本问题

6jjcrrmo 于 2021-09-13 发布在 Java

关注(0)|答案(6)|浏览(292)

谁能帮我弄清楚为什么会这样 onclick 事件在我单击按钮时不会触发。
我直接在代码中插入函数，而不是引用外部.js文件。
并且，单击按钮时，将显示更多文本。按钮的内部文本将为“无读”。再次单击按钮后，文本将隐藏，按钮的内部文本将为“阅读更多”。
我很困惑。

<html>

<head>
  <title>Form Validation:)</title>
  <!-- <script src="recreative.js"></script> -->
  <style>
    #moreText {
      display: none;
    }
  </style>
</head>

<body>
  The history of Chemistry represents
  <span id="dots">...</span>
  <span id="moreText">a time span from ancients history to the present.</span>
  <button id="button" onclick="show();">Read more</button>

  <script>
    function show() {
      var dots = document.getElementById("dots");
      var moreText = document.getElementById("moreText");
      var btn = document.getElementById("button");

      if (dots.style.display = "none") {
        dots.style.display = "inline";
        btn.innerHTML = "Read more";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btn.innerHTML = "Read less";
        moreText.style.display = "in line";
      }
    }
  </script>

</body>

</html>

JavaScript Html OnClick

来源：https://stackoverflow.com/questions/68342249/basic-questions-on-javascript-onclick

6条答案

按热度按时间

sshcrbum1#

你用的是 = ，这是一个 Assignment Operator . 要比较两个值，请使用 Equal Operator (==) 或者 Strict equal Operator (===) 在 if-else 声明，即。

if (dots.style.display === "none")

<html>

<head>
  <title>Form Validation:)</title>
  <!-- <script src="recreative.js"></script> -->
  <style>
    #moreText {
      display: none;
    }
  </style>
</head>

<body>
  The history of Chemistry represents
  <span id="dots">...</span>
  <span id="moreText">a time span from ancients history to the present.</span>
  <button id="button" onclick="show();">Read more</button>

  <script>
    function show() {
      var dots = document.getElementById("dots");
      var moreText = document.getElementById("moreText");
      var btn = document.getElementById("button");

      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btn.innerHTML = "Read more";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btn.innerHTML = "Read less";
        moreText.style.display = "in line";
      }
    }
  </script>

</body>

</html>

赞(0）回复(0）举报 2021-09-13

a1o7rhls2#

这是导致问题的陈述： if (dots.style.display = "none") .
在chrome控制台中运行以下语句： dots.style.display = "none" . 它返回“无”。

if("none"){ console.log("hello"); }

因此，始终执行第一个块。你的第二个else块也没用。
你需要 dots.style.display == "none" ，用于比较相等值。

赞(0）回复(0）举报 2021-09-13

soat7uwm3#

使用 = 如果条件是错误的，逻辑也是错误的，这就是文本不显示的原因

<html>

<head>
  <title>Form Validation:)</title>
  <!-- <script src="recreative.js"></script> -->
  <style>
    #moreText {
      display: none;
    }
    #dots{
    display:inline;
    }
  </style>
</head>

<body>
  The history of Chemistry represents
  <span id="dots">...</span>
  <span id="moreText">a time span from ancients history to the present.</span>
  <button id="button" onclick="show();">Read more</button>

  <script>
    function show() {
      var dots = document.getElementById("dots");
      var moreText = document.getElementById("moreText");
      var btn = document.getElementById("button");

      if (dots.style.display == "inline") {
        dots.style.display = "none";
        btn.innerHTML = "Read less";
        moreText.style.display = "inline";
      } else {
        dots.style.display = "inline";
        btn.innerHTML = "Read more";
        moreText.style.display = "none";
      }
    }
  </script>

</body>

</html>

赞(0）回复(0）举报 2021-09-13

h7appiyu4#

您的代码中有一些问题
在赋值的if语句中，首先应使用“==”或“==”检查值
第二，在 moreText.style.display = "in line"; 有一个额外的空间写“inline”
您应该通过写日志控制台开始调试，尝试跟踪和跟踪程序祝您好运

<html>

<head>
    <title>Form Validation:)</title>
    <!-- <script src="recreative.js"></script> -->
    <style>
        #moreText {
            display: none;
        }
    </style>
</head>

<body>
    The history of Chemistry represents
    <span id="dots">...</span>
    <span id="moreText">a time span from ancients history to the present.</span>
    <button id="button" onclick="show();">Read more</button>

    <script>
        function show() {
            var dots = document.getElementById("dots");
            var moreText = document.getElementById("moreText");
            var btn = document.getElementById("button");

            if (dots.style.display == "none") {
                dots.style.display = "inline";
                btn.innerHTML = "Read more";
                moreText.style.display = "none";
            } else {
                dots.style.display = "none";
                btn.innerHTML = "Read less";
                moreText.style.display = "inline";
            }
        }
    </script>

</body>

</html>

赞(0）回复(0）举报 2021-09-13

nqwrtyyt5#

你和我核对一下对账单 = 但是，您必须使用 == 比较语句的运算符。
所以只要改变这条线

if (dots.style.display = "none")

对此

if (dots.style.display == "none")

你应该做的另一个改变。我们没有 in line 展示。所以把它改成 inline 有了这个，你的问题就会解决。但我有两个建议。
首次使用 addEventListener 用于您的事件，例如：单击、鼠标悬停等
这个例子有 addEventListener 成为：

document.getElementById('button').addEventListener('click', 'show');

或者另一种方法是

document.getElementById('button').addEventListener('click', function(){  });

第二，使用 querySelector 而不是 getElementById 或 getElementsByClassName 或 getElementsByName 等等
所以你可以替换这个代码

document.getElementById("dots")

用这个

document.querySelector("#dots")

赞(0）回复(0）举报 2021-09-13

kcwpcxri6#

你的代码几乎是正确的。有一个虫子在里面吗 if 您分配了一个值而不是比较，另一个错误是您使用了这个术语 in line 而不是 inline .

<html>

<head>
  <title>Form Validation:)</title>
  <!-- <script src="recreative.js"></script> -->
  <style>
    #moreText {
      display: none;
    }
  </style>
</head>

<body>
  The history of Chemistry represents
  <span id="dots">...</span>
  <span id="moreText">a time span from ancients history to the present.</span>
  <button id="button" onclick="show();">Read more</button>

  <script>
    function show() {
      var dots = document.getElementById("dots");
      var moreText = document.getElementById("moreText");
      var btn = document.getElementById("button");

      if (dots.style.display === "none") {
        dots.style.display = "inline";
        btn.innerHTML = "Read more";
        moreText.style.display = "none";
      } else {
        dots.style.display = "none";
        btn.innerHTML = "Read less";
        moreText.style.display = "inline";
      }
    }
  </script>

</body>

</html>

赞(0）回复(0）举报 2021-09-13

我来回答

关于javascript“onclick”的基本问题

6条答案

相关问题

热门标签

最新问答