Нажатие div не меняет ширину и высоту - PullRequest
Новая
       2

Нажатие div не меняет ширину и высоту

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

Я сделал щелчок div.После нажатия на элемент div (some_id1, немного enter code here _id2) вам необходимо изменить значение каждого элемента div (width, height, background-color).Цвет фона работает нормально, но ширина и высота не работают.Я не могу узнать, где я допустил ошибку. 

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
    };
}

function ColorChange(){
  if(clickedDivId == "some_id1"){
	    var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = x;
  }
  if(clickedDivId == "some_id2"){
	    var y = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = y;
  }
}

function ChengeWidth(){
  if(clickedDivId == "some_id1"){
		var z = document.getElementById("divwidth").value;
        document.getElementById(clickedDivId).style.width = z;
  }
  if(clickedDivId == "some_id2"){
	    var w = document.getElementById("divwidth").value;
        document.getElementById(clickedDivId).style.width = w;
  }
}
#some_id1{
  width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}

#some_id2{
  width: 50px;
height: 50px;
  margin: 10px;
background-color: red;
}
<select id="divwidth" onchange="ChengeWidth()">
     <option value="100px">100px</option>
</select>

<input type="color" id="divbackgroundcolor" onchange="ColorChange()">

<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>

Ответы [ 3 ]

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

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
    };
}

function ColorChange(){
  if(clickedDivId == "some_id1"){
	    var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = x;
  }
  if(clickedDivId == "some_id2"){
	    var y = document.getElementById("divbackgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = y;
  }
}

function ChengeWidth(){
  if(clickedDivId == "some_id1"){
		var z = document.getElementById("divwidth").value;
        document.getElementById(clickedDivId).style.width = z;
  }
  if(clickedDivId == "some_id2"){
	    var w = document.getElementById("divwidth").value;
        document.getElementById(clickedDivId).style.width = w;
  }
}
#some_id1{
  width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}

#some_id2{
  width: 50px;
height: 50px;
  margin: 10px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">

</head>
<body>
<select id="divwidth" onchange="ChengeWidth()">
     <option value="100px">100px</option>
      <option value="200px">200px</option>
       <option value="300px">300px</option>
       <option value="50px">50px</option>
</select>

<input type="color" id="divbackgroundcolor" onchange="ColorChange()">

<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
</body>

</html>
0 голосов
/ 14 мая 2019

HTML 

<div id="some_id1" class="clickable"></div>
<div id="some_id2" class="clickable"></div>

CSS 

.clickable {
  width: 50px;
  height: 50px;
  margin: 10px;  
}

Javascript 

let current;

function changeColor() {
  const color = document.getElementById("divbackgroundcolor").value;
  current.style.backgroundColor = color;
}

function changeWidth() {
  const width = document.getElementById("divwidth").value;
  current.style.width = width;
}

function initialize() {
    const clickable = document.querySelectorAll('.clickable');

    clickable.forEach((item) => {
    item.onClick = () => {
      current = this;
      changeColor();
      changeWidth();
    }
  });
}

initialize();

Мой подход заключается в том, чтобы разбить проблему на маленькие кусочки, как вы можете видеть в моем предложении javascript.По сути, каждый метод - это шаг, который можно полностью протестировать перед переходом к следующей части:

  • Добавить обработчики событий к элементам (я изменил его на класс, а не применял его ко всем <div>-элементы).Используйте console.log, чтобы убедиться, что все работает как положено.
  • Измените цвет;сначала вызовите его немедленно без обработки кликов между ними.Это работает?Вероятно, не потому, что я не включил #divwidth в моем примере, но, надеюсь, вы увидите подход, к которому я стремлюсь.
  • Затем измените ширину;так же, как и в предыдущем: я не включил #divbackgroundcolor, поэтому он пока не будет работать
  • Наконец, все свяжем и вызовем методы в обработчике кликов

Надеюсь, я указалвы в правильном направлении;удачи!

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

В меню есть только одна опция, поэтому вы не можете изменить значение, и событие onchange никогда не сработает.Если вы даете ему несколько вариантов, код работает. 

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
  };
}

function ColorChange() {
  if (clickedDivId == "some_id1") {
    var x = document.getElementById("divbackgroundcolor").value;
    document.getElementById(clickedDivId).style.backgroundColor = x;
  }
  if (clickedDivId == "some_id2") {
    var y = document.getElementById("divbackgroundcolor").value;
    document.getElementById(clickedDivId).style.backgroundColor = y;
  }
}

function ChengeWidth() {
  if (clickedDivId == "some_id1") {
    var z = document.getElementById("divwidth").value;
    document.getElementById(clickedDivId).style.width = z;
  }
  if (clickedDivId == "some_id2") {
    var w = document.getElementById("divwidth").value;
    document.getElementById(clickedDivId).style.width = w;
  }
}
#some_id1 {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: red;
}

#some_id2 {
  width: 50px;
  height: 50px;
  margin: 10px;
  background-color: red;
}
<select id="divwidth" onchange="ChengeWidth()">
  <option value="50px">50px</option>
  <option value="100px">100px</option>
  <option value="150px">150px</option>
  <option value="200px">200px</option>
</select>

<input type="color" id="divbackgroundcolor" onchange="ColorChange()">

<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...