Простой, если иначе onclick делать?

Как это сделать, если да, нажатие кнопки изменило цвет?
Использует .onclick лучший вариант для этого?
Я делаю это оптимальным способом?

Спасибо.Простой, если иначе 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; 
}

ЯШ:

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();

источник

2015-01-01 Markus Hallcyon

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

Я до сих пор не понимаю, как поместить это в инструкцию if else, я действительно новичок в javascript. –

'document.getElementById ('yes'). AddEventListener (" click ", function() {});' – undone

Вы должны использовать OnClick метод, потому что функция запускается один раз, когда страница загружена, и нет кнопки будет затем нажмите

Таким образом, вы должны добавить еще, которые проходят каждый раз, когда пользователь нажмет любую клавишу, чтобы добавить изменения в сНу фоне

Так что функция должна быть что-то вроде этого

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

источник

2015-01-01 15:48:18 Maroxtn

вы вызываете функцию на время загрузки страницы, но не называющие на кнопке события, вам нужно будет позвонить function onclick event, вы можете добавить событие inline element style или event bining

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>

источник

2015-01-01 15:05:52 Girish

Предпочтительные современный метод заключается в использовании 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>

источник

2015-01-01 16:00:07 Xotic750

Вы можете использовать JQuery в нем, как

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

Кроме JQuery проста в использовании.

Вы можете вносить изменения в цвета и т. Д., Используя простой jQuery или Javascript.

источник

2015-01-01 17:54:04

Простой, если иначе onclick делать?

ответ

Смежные вопросы