2015-01-01 89 views
4
  1. 我該如何做到這一點,如果是按鈕點擊更改顏色?
  2. 正在使用.onclick這個最好的選擇?
  3. 我在做最佳方式嗎?

謝謝。簡單如果其他onclick然後呢?

HTML:

<body> 
<div id="box"></div> 
<button id="yes">yes</button> 
<button id="no">no</button> 
<script src="js/script.js"></script> 
</body> 

CSS:

#box { 
    width: 200px; 
    height: 200px; 
    background-color: red; 
} 

JS:

function Choice() { 
    var box = document.getElementById("box"); 
    var yes = document.getElementById("yes"); 
    var no = document.getElementById("no"); 

    if (yes.clicked == true) { 
     box.style.backgroundColor = "red"; 
    } else if (no.clicked == true) { 
     box.style.backgroundColor = "green"; 
    } else { 
     box.style.backgroundColor = "purple"; 
    }; 
}; 

Choice(); 
+0

http://www.w3schools.com/jsref/event_onclick.asp –

+0

我還是不知道如何將它放入一個if else語句,我真的很新的JavaScript。 。 –

+0

'的document.getElementById( '是')的addEventListener( 「點擊」,函數(){});' – undone

回答

5

您應該使用的onclick方法,因爲函數運行一次,當頁面加載和無按鈕會點擊然後

所以,你必須添加一個即使是運行每次用戶按任意鍵添加更改DIV背景

因此函數應該是這樣的

htmlelement.onclick() = function(){ 
    //Do the changes 
} 

所以,你的代碼有看起來是這樣的:

var box = document.getElementById("box"); 
var yes = document.getElementById("yes"); 
var no = document.getElementById("no"); 

yes.onclick = function(){ 
    box.style.backgroundColor = "red"; 
} 

no.onclick = function(){ 
    box.style.backgroundColor = "green"; 
} 

這意味着被點擊#yes按鈕時div的顏色是紅色,並點擊按鈕#NO當背景爲綠色

這裏是一個Jsfiddle

1

你調用頁面加載時間的功能,但按鈕事件不能打電話,你就需要調用功能onclick事件,您可以添加事件內聯元素樣式或事件綁定

function Choice(elem) { 
 
    var box = document.getElementById("box"); 
 
    if (elem.id == "no") { 
 
    box.style.backgroundColor = "red"; 
 
    } else if (elem.id == "yes") { 
 
    box.style.backgroundColor = "green"; 
 
    } else { 
 
    box.style.backgroundColor = "purple"; 
 
    }; 
 
};
<div id="box">dd</div> 
 
<button id="yes" onclick="Choice(this);">yes</button> 
 
<button id="no" onclick="Choice(this);">no</button> 
 
<button id="other" onclick="Choice(this);">other</button>

或事件綁定,

window.onload = function() { 
 
    var box = document.getElementById("box"); 
 
    document.getElementById("yes").onclick = function() { 
 
    box.style.backgroundColor = "red"; 
 
    } 
 
    document.getElementById("no").onclick = function() { 
 
    box.style.backgroundColor = "green"; 
 
    } 
 
}
<div id="box">dd</div> 
 
<button id="yes">yes</button> 
 
<button id="no">no</button>

3

優選的現代方法是通過添加事件監聽器引導到所述元素或元素的父使用addEventListener(委託)。

一個例子,使用委託的事件,可能是

var box = document.getElementById('box'); 
 

 
document.getElementById('buttons').addEventListener('click', function(evt) { 
 
    var target = evt.target; 
 
    if (target.id === 'yes') { 
 
    box.style.backgroundColor = 'red'; 
 
    } else if (target.id === 'no') { 
 
    box.style.backgroundColor = 'green'; 
 
    } else { 
 
    box.style.backgroundColor = 'purple'; 
 
    } 
 
}, false);
#box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
} 
 
#buttons { 
 
    margin-top: 50px; 
 
}
<div id='box'></div> 
 
<div id='buttons'> 
 
    <button id='yes'>yes</button> 
 
    <button id='no'>no</button> 
 
    <p>Click one of the buttons above.</p> 
 
</div>

2

你可以在它使用jQuery像

$('#yesh').click(function(){ 
    *****HERE GOES THE FUNCTION***** 
}); 

除了jQuery是易於使用。

您可以使用簡單的jQuery或Javascript顏色等變化。