Получение элементов для изменения цвета отдельно

Я ищу программу, которая будет в основном менять цвет при каждом щелчке по каждому элементу. У меня есть, чтобы работать до такой степени, что я могу щелкнуть только по странице, и оба элемента могут изменить цвет, но мне нужно, чтобы они были независимы друг от друга. Как мне сделать что-то подобное?Получение элементов для изменения цвета отдельно

document.onload = function() 
{ 
    document.onclick = changeTest("box0", "green"); 
}; 

function changeTest(id, color) 
{ 
    var element; 
    element = document.getElementById(id); 
    element.style.backgroundColor = color; 
}

Html:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<title>this will appear on the tab in the browser</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script src="onclick.js" type="text/javascript"></script> 

<style type="text/css"> 
{ 
border: 0; 
margin:0; 
paddig: 0; 
} 
body 
{ 
font-family:"Times New Roman"; serif; 
font-size: 12pt; 
} 
.box 
{ 
    height: 10em; 
    width: 10em; 
    margin: 2px; 
} 
#box0 
{ 
    background-color: yellow; 
} 
#box1 
{ 
    background-color: red; 
} 
</style> 

</head> 
<body> 
    <div class="box" id="box0"></div> 
    <div class="box" id="box1"></div> 
</body> 
</html>

источник

2015-02-23 user2009653

Как выглядит ваш html? Этого недостаточно. – thomasb

Пожалуйста, отредактируйте свой вопрос, а не комментируйте его ... – thomasb

Да им жаль. Я не понимал, что ошибался. Виноват. – user2009653

Вы должны связать слушателей событий в отдельных коробках. Это так просто. Что-то вроде этого (не проверено):

document.getElementById("box0").onclick = changeTest("box0", "green"); 
document.getElementById("box1").onclick = changeTest("box1", "green");

источник

2015-02-23 12:59:41 thomasb

Я уже пробовал это решение. Проблема в том, что в настоящее время программа запускает этот код при загрузке вместо onclick. Поэтому, когда вы делаете клик, ничего не происходит, потому что он уже запускает загрузку. – user2009653

Да, я думаю, что это должно быть '.onclick = function() {changeTest (...)}'. См. Ответ @Zeratops. – thomasb

Я хотел бы использовать JQuery для этого:

HTML:

<body> 
<div class="box" id="box0">box0</div> 
<div class="box" id="box1">box1</div> 
</body>

и сценария:

$("#box0").click(function() { 
    changeTest("box0", "green"); 
}); 

$("#box1").click(function() { 
    changeTest("box1", "red"); 
});

Вот jsfiddle:

http://jsfiddle.net/o8c8y23x/

Хорошо, без JQuery:

<body> 
    <div class="box" id="box0" onclick = "changeTest('box0', 'red');">box0</div> 
    <div class="box" id="box1" onclick = "changeTest('box1', 'green');">box1</div> 
</body>

jsfiddle: http://jsfiddle.net/o8c8y23x/2/

источник

2015-02-23 13:03:23 less

Я - курс программирования интро, и JQuery - это нечто совершенно вне сферы обучения, которое мы сейчас изучаем. – user2009653

var box0 = document.getElementById("box0"); 
 
var box1 = document.getElementById("box1"); 
 

 
var color = "green"; 
 

 
function changeColor(box, color) { 
 
    box.style.backgroundColor = color; 
 
} 
 

 
box0.onclick = function() { 
 
    changeColor(this, color); 
 
}; 
 

 
box1.onclick = function() { 
 
    changeColor(this, color); 
 
};

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>this will appear on the tab in the browser</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <script src="onclick.js" type="text/javascript"></script> 
 
    <style type="text/css"> 
 
     * { 
 
     border: 0; 
 
     margin:0; 
 
     padding: 0; 
 
     } 
 
     
 
     body { 
 
     font-family:"Times New Roman"; serif; 
 
     font-size: 12pt; 
 
     } 
 
     
 
     .box 
 
     { 
 
     height: 10em; 
 
     width: 10em; 
 
     margin: 2px; 
 
     } 
 
     
 
     #box0 { 
 
     background-color: yellow; 
 
     } 
 
     
 
     #box1 { 
 
     background-color: red; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="box" id="box0"></div> 
 
    <div class="box" id="box1"></div> 
 
    </body> 
 
</html>

Зная вы также можете perfom это с addEventListener() методом.

источник

2015-02-23 13:06:46

Основываясь на комментарии к вопросам ниже, это наилучший ответ. Однако он не поддерживает IE8 или 7, поэтому следует отметить, что вы хотите использовать [attachEvent] (https://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29 .aspx) –

Мы еще не изучили addEventListener. – user2009653

@ CayceK действительно прав, чтобы обеспечить совместимость с перекрестными версиями, вам нужно использовать '.onclick = function() {/ * process * /}', и если это упражнение, вы не должны использовать '.addEventListener()' if это не цель. –

Получение элементов для изменения цвета отдельно

ответ

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