Javascript if和else同时运行_Javascript_Html

Javascript if和else同时运行

javascript html

Javascript if和else同时运行,javascript,html,Javascript,Html,我想通过onclick选择一个链接，当链接被选中时，背景应该会改变。当我再次单击所选链接时，背景应再次透明我的剧本： <div style="background: transparent;" onclick="click()" id="0"> 问题在于方法名click，在onclick处理程序中，它指的是内部click方法-click是本机方法，而不是我们的方法重命名它，它应该很好-您需要使用backgroundColor <button onclick="testme

我想通过onclick选择一个链接，当链接被选中时，背景应该会改变。当我再次单击所选链接时，背景应再次透明

我的剧本：

<div style="background: transparent;" onclick="click()" id="0">

问题在于方法名click，在onclick处理程序中，它指的是内部click方法-

click

是本机方法，而不是我们的方法

重命名它，它应该很好-您需要使用

backgroundColor

<button onclick="testme()">Test</button>

演示：

这里有两件事，不要调用函数click，并使用backgroundColor属性not background，因为background是一个复合属性，它需要的值比颜色多，因此将其与颜色（即=透明）进行比较可能不起作用

所以

HTML:

编辑

处理多个div

您想要行为的每个div都应该是这样的（即，使用onclick（this））

或者更好

function notclick(ele) {     
  ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent");
  }

据我所知，您只需要一个切换

2重要说明：

ID不能为零（否则会断开）：我将其替换为10
不要使用click（），因为它是保留名称：我将其替换为toggle（）

除了上述内容，代码没有太多变化。干杯

更新以处理多个div：我现在传递对象：

<html>
        <body>
            <div style="background: red;" onclick="toggle(this)" id="10">
                    CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <div style="background: red;" onclick="toggle(this)" id="20">
                    CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <script>
                function toggle(o) {
                  if(o.style.background == "transparent") {
                    o.style.background = "red";
                    alert("red on "+o.id);
                  }
                  else {
                    o.style.background = "transparent";
                    alert("transparent on "+o.id);
                  }
                }
            </script>
        </body>
</html>


单击10切换我的背景色
点击20切换我的背景色
功能切换（o）{
如果（o.style.background==“透明”）{
o、 style.background=“红色”；
警报（“红色开启”+o.id）；
}
否则{
o、 style.background=“透明”；
警报（“透明开启”+o.id）；
}
}

一个

的id无效HTMLY您还有一个额外的

）

在线7@LeoFarmer

background

应该可以正常工作，但是如果要使用

background color

，正确的属性名称是

backgroundColor

它的实际click.style.backgroundColor，否则将从背景中减去颜色@Johncode不想让你的泡泡破灭，但HTML5允许

作为有效的ID属性值-不，这不是我想要的，请看这里，但当我第一次单击它时，没有任何反应。@selfproblemmake你想切换背景色，不是吗-该功能似乎在小提琴中工作-如果不是，那是什么你想在ie中做背景色透明吗？不确定你看到了什么，因为我只是从7-11开始测试它（模拟）如果我有两个div标记，或者更糟的是，如果你有多个div，并且你希望所有行为都是独立的，那么我不会像你那样做，毕竟使用document.getElementById（“0”）是非常具体的一个元素，但这将是一个完全不同的场景，这个问题-在我看来，你可能有一个更大的图片比这个问题，如果是这样，启发我们，我们很乐意帮助，根据@Stéphane de Luca pass在“this”中，并给它一个参数的函数，虽然他的代码不工作，所以我会添加我的版本到我答案的底部当我有两个div标记或更多时会发生什么你可以将其作为参数传递给函数，然后测试它是什么div。我编辑我的答案以反映@SelfproblemmadeWeird:your fiddle Not found toggle（）函数（我在inspector中查看过）。只需将我的代码复制/粘贴到一个文件toggle.html中，你就会看到它在工作（我在safari上工作）。@selfproblemmake我对你的小提琴做了一个修改，使它在这里工作。我试图理解你最初的小提琴为什么不能工作，但没有成功。我只是将js放入一个脚本标记中，然后瞧。（如果你能找到一个解释，我很想知道为什么小提琴不起作用。@selfproblemmake你可能想接受我的答案：-）

<div style="background-color: transparent;" onclick="notclick()" id="0">

function notclick() {
  var click = document.getElementById("0");
  if(click.style.backgroundColor == "transparent") {
    click.style.backgroundColor = "red";
  }
  else {
    click.style.backgroundColor = "transparent";
  }
}

<div style="background-color: transparent;" onclick="notclick(this)" id="0">
<div style="background-color: transparent;" onclick="notclick(this)" id="1">
<div style="background-color: transparent;" onclick="notclick(this)" id="2">

function notclick(ele) {

  if(ele.style.backgroundColor == "transparent") {
    ele.style.backgroundColor = "red";
  }
  else {
    ele.style.backgroundColor = "transparent";
  }
}

function notclick(ele) {     
  ele.style.backgroundColor = (ele.style.backgroundColor == "transparent" ? "red" :"transparent");
  }

<html>
        <body>
            <div style="background: red;" onclick="toggle(this)" id="10">
                    CLICK ON 10 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <div style="background: red;" onclick="toggle(this)" id="20">
                    CLICK ON 20 TO TOGGLE MY BACKGROUND COLOR
            </div>
            <script>
                function toggle(o) {
                  if(o.style.background == "transparent") {
                    o.style.background = "red";
                    alert("red on "+o.id);
                  }
                  else {
                    o.style.background = "transparent";
                    alert("transparent on "+o.id);
                  }
                }
            </script>
        </body>
</html>