Question

我点击了一个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>

Answer 1

菜单只有一个选项，因此您无法更改该值，并且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>

Answer 2

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>

Answer 3

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，所以它还行不通
最后将所有内容捆绑在一起，并在点击处理程序中调用方法

希望我已为您指明了正确的方向；祝你好运！

单击div不会更改宽度和高度

3 个答案: