Изменить цвет на элемент, на который нажали - PullRequest
Новая
       2

Изменить цвет на элемент, на который нажали

0 голосов
/ 13 мая 2019

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

<html>
<head>
<style> 
html, body {
    overflow: display;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
}

#some_id1{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id2{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id3{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id4{
  width: 50px;
height: 50px;
background-color: red;
}

</style>
</head>
<body>
<input type="color" id="divbackgroundcolor" onchange="myFunction()">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>

<script>

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i <= divCount; i += 1) {
    div[i].onclick = function(e) {
        var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(this.id).style.backgroundColor = x;
    };
}


</script>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 13 мая 2019

В вашем примере есть только ошибки:

В HTML уберите «onclick» в вашем «input»

А в JS ваш «for» цикл использует «i

Измените только эти строки и будете работать!

0 голосов
/ 13 мая 2019

Хорошо, во-первых, я не понимаю, почему вы используете id для каждого div, в то время как у вас одинаковый стиль для каждого. лучше сделай это с классом

Во-вторых, я немного посмотрел и обнаружил, что люди делают, просто скрывают палитру цветов (input) и запускают ее при нажатии.

В вашем фрагменте кода это будет выглядеть примерно так: 

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id
        document.getElementById("divbackgroundcolor").click()
    };
}

function colorChange(){
  var x = document.getElementById("divbackgroundcolor").value;
  document.getElementById(clickedDivId).style.backgroundColor = x;
}
html, body {
  overflow: display;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}
#divbackgroundcolor {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.some_style {
  width: 50px;
  height: 50px;
  background-color: red;
}
<input type="color" id="divbackgroundcolor" onchange="colorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
<div class="some_style" id="some_id3"></div>
<div class="some_style" id="some_id4"></div>
<div class="some_style" id="some_id5"></div>

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

Удачи.

0 голосов
/ 13 мая 2019

Ваш код работает нормально, в вашем цикле есть ошибка, когда вы выполняете цикл до i <= divCount, что будет больше, чем длина div.Кроме того, вам не нужна функция onchange на divbackgroundcolor.Смотри рабочий код ниже. 

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i < divCount; i += 1) { // changed to i < divCount
  div[i].onclick = function(e) {
    var x = document.getElementById("divbackgroundcolor").value;
    document.getElementById(this.id).style.backgroundColor = x;
  };
}
#some_id1 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id2 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id3 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id4 {
  width: 50px;
  height: 50px;
  background-color: red;
}
<input type="color" id="divbackgroundcolor">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...