Clicking div does not change the width and height

Ask a question
2

I made a clicking div. After clicking the div (some_id1, someenter code here_id2), you need to change the value on each div (width, height, background-color). Background-color works normally, but width and height are not working. I cannot find out where I made a mistake.

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>
offer bounty
add comment

1 Answer

2

The html onchnage event only emitted when a user changes the selected option of a <select> element. In your code, the option of a <select> is only 1, and when you click 100 on option its does not emit scipt because you does not changes the selected item (the selected item is same as before). To make code work you must add more option to <select>. This html code work for me:

<select id="divwidth" onchange="ChengeWidth()">
    <option value="50px">50px</option>
    <option value="100px">100px</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>
add comment

Your Answer