仅创建第二次单击事件Javascript

我需要有一个图像改变不透明度，当我点击一个按钮，然后改变回当我再次点击按钮。我只能使用Javascript。我已经设置了两个if/else语句，当我第一次单击按钮时，事件发生了，但我无法让第二个事件发生。我对javascript非常陌生

var img = document.querySelector('#img');
var button1 = document.querySelector('#button1');
var bool = new Boolean();


if (chrome.style.opacity = "1.0"){
    bool = true;
    }
else if (chrome.style.opacity = "0.5"){
    bool = false;
    }

if (bool){
    button1.addEventListener('click', function() {
    chrome.style.opacity = "0.5";
    });
    }
else{
    button1.addEventListener('click', function() {
    chrome.style.opacity = "1.0";
    });
}

---

使用一次单击事件并将if/else语句放入其中

button1.addEventListener('click', function() {
     if (chrome.style.opacity = "1.0"){
          chrome.style.opacity = "0.5" 
    }else{
          chrome.style.opacity = "1.0"
    }
 });

试试这个

html

js

我想你的js应该是这样的..调整一下就行了

button1.addEventListener('click', function() {   
    chrome.style.opacity = (chrome.style.opacity == 1.0) ? 0.5 : 1.0;            
});

---

只需对您的代码进行注释：

> var bool = new Boolean();

你真的不想那样做。布尔对象的存在是为了支持布尔基元，而不是单独使用。另外，在必要时才赋值。将变量初始化为临时值是毫无意义的，它肯定不会“键入”变量

ECMAScript变量没有类型，它们的值有类型。因此，当您以后这样做时：

> bool = true;

bool不再引用以前指定的对象，它现在的值为

true

无论如何，这里可以完全避免使用bool，请参见其他答案

哦，还有为什么要避免布尔对象：

// Create a Boolean object with a value of false
var foo = new Boolean(false); 

// Evaluate in expression that will call internal getValue method
alert( foo );  // false

// Evaluate in expression that will do Type conversion
alert( !foo ); // false

哎呀！可以肯定的是：

alert( foo == !foo  ); // true!!
alert( foo == !!foo ); // false

---

所以远离布尔对象！即使您使用这种行为对您有利，可读性和维护也会受到影响。

Tnx。顺便说一句，一定要使用document.getElementById（“button1”）.addEventListener&document.getElementById（“chrome”）。样式更符合标准。我没有使用它，只是为了与您的代码保持相似。另外IE8和down不支持addEventListener（），因此必须查看需要支持哪些浏览器

> bool = true;

// Create a Boolean object with a value of false
var foo = new Boolean(false); 

// Evaluate in expression that will call internal getValue method
alert( foo );  // false

// Evaluate in expression that will do Type conversion
alert( !foo ); // false

alert( foo == !foo  ); // true!!
alert( foo == !!foo ); // false