在Javascript中選擇兩個按鈕時，如何使條件發生？

Question

我該如何用Javascript編寫內容，以便在按下兩個按鈕時發生一件事？

例如，我想要這樣的東西

<button>A</button>
<button>B</button>
<img id = "pics" src = "/randompicture.gif">

在JS中，我希望能夠同時選擇按鈕A和B時使某些內容可見。

If(button A is hit AND button B is hit){
then this happens, 
such as document.getElementById("pics").visibility = "hidden"}

謝謝

PS：對不起，語法錯誤。 我是HTML，CSS和JS的新手。 任何幫助是極大的贊賞。

編輯：“選擇”是指至少兩個按鈕都被按下一次

編輯2：在repl.it中嘗試了@ Khauri McClain的事件偵聽器建議。 似乎奏效了，我得到了我想要的。 這是我寫的

document.getElementById("buttonWithFirstId").addEventListener("click", function(){
     document.getElementById("buttonWithSecondId").addEventListener("click", function(){
         document.getElementById("imageId").style.visibility = "visible"
     });
});

編輯3：哇，看來有很多方法可以做到這一點。 我很高興嘗試這些。 感謝您提出所有這些不同的建議。

謝謝大家的建議。

Answer 1

您可以使用添加到/刪除到每個按鈕的CSS類作為按鈕是否被單擊的“標志”。 然后，使用Array.every() ] 1方法（檢查每個按鈕都具有該類）。

注意：您設置visibility代碼不正確。 您不能直接從DOM對象訪問CSS屬性，而必須首先訪問DOM對象的.style屬性。 通常，最好提前設置CSS類，然后從元素中應用或刪除該類。

因此，當您要訪問元素具有的類時，可以使用.classList屬性：

element.classList.add("className")      // adds the class
element.classList.remove("className")   // removes the class
element.classList.contains("className") // returns true/false

無論您需要單擊多少個按鈕，此解決方案都將起作用，並且我添加了一些其他按鈕來顯示此內容。 我還為視覺指示器添加了一些其他CSS。

 // Get all related buttons into an array var btns = Array.prototype.slice.call(document.querySelectorAll(".hit")); var img = document.getElementById("pics"); // Get reference to image // Loop over the button array btns.forEach(function(btn){ // Set up a click event handler for each button btn.addEventListener("click", function() { // Add or remove a CSS class that tracks the current "hit" state of the button // and creates a visual cue as to its state based on whether the class is already applied. this.classList.contains("clicked") ? this.classList.remove("clicked") : this.classList.add("clicked"); // If all the buttons have the clicked class hide the image otherwise don't btns.every((b) => { return b.classList.contains("clicked"); }) ? pics.classList.add("hidden") : pics.classList.remove("hidden"); }); }); 

 /* These pre-made classes will be applied/removed as necessary. */ .clicked { box-shadow:0 0 5px rgba(255, 0, 0, .5) } .hidden { visibility:hidden; } 

 <button class="hit">A</button> <button class="hit">B</button> <button class="hit">C</button> <button class="hit">D</button> <img id = "pics" src = "/randompicture.gif" alt="Image Here"> 

Answer 2

您可以跟蹤按鈕的狀態。 請注意，以下實現允許用戶在單擊和未單擊之間切換每個按鈕的狀態。 如果您希望一旦用戶再次單擊按鈕就被視為用戶單擊了按鈕，則只需將state[buttonClicked] = !state[buttonClicked]的行更改為state[buttonClicked] = true 。

 const state = {A: false, B: false}; addEventListener('click', (e) => { const buttonClicked = e.target.innerHTML; state[buttonClicked] = !state[buttonClicked]; console.log(Object.values(state)); if(Object.values(state).includes(false)) { console.log('not all buttons are clicked'); } else { console.log('all buttons are clicked'); // Do what you got to do here document.getElementById("pics").style.visibility = "hidden"; } }); 

 <button>A</button> <button>B</button> <br/> <img id = "pics" src ="http://placehold.it/200x200" /> 

Answer 3

您可以通過從數組中添加/刪除按鈕來跟蹤選擇了哪些按鈕。 當兩個按鈕都在數組中時，執行操作。

如果按鈕不在數組中，則會將其添加到數組中。 如果再次單擊該按鈕並且它在數組中，它將被刪除。

 let clicked = [] Array.from(document.querySelectorAll('button')).forEach(btn => { btn.addEventListener('click', e => { // The clicked button let target = e.currentTarget // Test if the button is in the array let idx = clicked.indexOf(target) // If it isn't in the array add it if (idx == -1) clicked.push(target) // Otherwise remove it else clicked.splice(idx, 1) // Test the length of the array. // Note: there might be a more dynamic way to do this // however, this is the simplest way. if (clicked.length == 2) { myAction() } }) }) function myAction() { console.log('both buttons clicked!') } 

 <button id="a">A</button> <button id="b">B</button> 

Answer 4

嘗試添加以下功能：

 function clickedbutton(e) { /* Check if button has class selected */ if (e.classList.contains("selected")) { e.classList.remove("selected"); /* removit if clicked twice */ } else { /* Addit if not */ e.className += " selected"; } /* loop trow all button */ var btn = document.getElementsByTagName("button"); var i; var check=0; for (i = 0; i < btn.length; i++) { if (btn[i].classList.contains("selected")) { check++; } else { check--; } } console.log(check); /* if the button has the class selected then change pic src */ if (check == 2) { document.getElementById("pics").src = "https://media.gadventures.com/media-server/cache/a4/b7/a4b727085661bdaa6cc94e84fbe21039.jpg"; } else { document.getElementById("pics").src = "http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg"; } } 

 .selected { border: 1px solid #999999; background-color: #cccccc; color: #666666; } img { width: 150px } .as-console-wrapper { max-height: 50px !important; } 

 <button onclick="clickedbutton(this);">A</button> <button onclick="clickedbutton(this);">B</button> <img id="pics" src="http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg">