if条件语句在包含HTML DOM事件的javascript代码中不起作用[已关闭]

carvr3hs 于 2023-01-04 发布在 Java

关注(0)|答案(1)|浏览(92)

- 已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
9小时前关门了。
Improve this question
我正在尝试用简单的javascript和html来实现喜欢按钮的功能。在点击喜欢按钮时，onclick事件应运行一个javascript函数，例如like（），这样函数应该把按钮变成喜欢的，在重新点击它应该再次把它变成不喜欢的。我尝试使用if else逻辑实现这个功能，但是我只能看到else部分工作，if块不工作。最初的悬停和喜欢的功能是工作，但一旦按钮是喜欢的，我试图不喜欢它，它是不工作的，也悬停效果是保持后喜欢，甚至是不去移动鼠标的按钮元素。有人能帮助我哪里出错了吗？谢谢提前。这里是我写的代码。

<!DOCTYPE Html>
<html lang=en_US>
    <head>
        <title> Like Button Working Demo </title>
    </head>
    <body>
        <center>
            <h1> Like Button Working Demo </h1>
            <br><br>
            <a href="#"><img id="demo" onmouseover="likely(demo)" onmouseout="like(demo)" onclick="liked(demo)" src='likee.png' height=200px width=200px style='border : 0;'></a>
        </center>
        <script>
            function likely(demo) {
                demo.src = 'hover.png';
                demo.style.height = "200px";
                demo.style.width = "200px";
            }
            function like(demo) {
                    demo.src = 'likee.png';
                    demo.style.height = "200px";
                    demo.style.width = "200px";
                
            }
            function liked(demo) {
                demo.src = 'liked.png';
                demo.style.height = "200px";
                demo.style.width = "200px";
                demo.onmouseout = '#';
            }
        </script>
    </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/74992313/if-conditional-statement-is-not-working-in-javascript-code-with-html-dom-event

1条答案

按热度按时间

6mzjoqzu1#

如前所述，这里没有if/else语句。
一个更好的解决方案是将状态保存在变量中的某个地方，然后使用该变量来检查应该运行哪个函数。下面是一个例子，你可以尝试将其插入到你的代码中。为此更改你的脚本。

<script>
  let selected = false;

  function toggle(demo) {
    if (selected) {
      selected = false;
      unlike(demo);
    } else {
      selected = true;
      liked(demo);
    }
  }

  function likely(demo) {
    demo.src = "hover.png";
    demo.style.height = "200px";
    demo.style.width = "200px";
  }

  function like(demo) {
    demo.src = "likee.png";
    demo.style.height = "200px";
    demo.style.width = "200px";
  }

  function liked(demo) {
    demo.src = "liked.png";
    demo.style.height = "200px";
    demo.style.width = "200px";
    demo.style.backgroundColor = "green";
  }

  function unlike(demo) {
    // what you want to happen when unlike
    demo.style.backgroundColor = "red";
  }
</script>

赞(0）回复(0）举报 2023-01-04

我来回答

if条件语句在包含HTML DOM事件的javascript代码中不起作用[已关闭]

1条答案

相关问题

热门标签

最新问答