简体   繁体   中英

How to change width of my div JavaScript

Hello everyone I am trying to change width and height of my div element with Javascript, when user insert values, I want to change size automatically so here is what I tried:

<br><p>chose button color</p>
<a href="#" onclick="redBtn()">red</a>
<a href="#" onclick="blueBtn()">blue</a>
<a href="#" onclick="greenBtn()">Green</a>
<a href="#" onclick="yellowBtn()">Yellow</a>
<a href="#" onclick="whiteBtn()">White</a><br>
OR type your own: <input type="text" id="ownBtn"> <button onclick="submitBtn();" href="javascript:;">Submit</button><br>
Type your width: <input type="text" id="userWidth"><button onclick="submitWidth()" href="javascript:;">Submit Width</button> </input><br>

<div class="div1" id="div1" class="class1">    
    <div class="div2" id="div3">     
      <a href="https://calendly.com/dumbomoving">

      </a>                  
    </div>
</div>
<script>
function submitWidth() {
    var userWidth = document.getElementById();
    document.getElementById("div2").style.width = userWidth.value + "px";
}
  function submitBtn()
{
    var userBack = document.getElementById('ownBtn');
    document.getElementById("btn1").style.backgroundColor =ownBtn.value;    
}
</script>

So for button color is ok, but for width is not! So does someone have some idea how to do this?

You wrote

document.getElementById("div2")

But I see no element with id div2 in your HTML.

You did

<div class="div2" id="div3">

But you probably wanted to write

<div class="div2" id="div2">

After all, all your javascript is really weird. Maybe try this :

function submitWidth() {
    var userWidth = document.getElementById("userWidth");
    userWidth.style.width = userWidth.value + "px";
}

It was very stupid mistake

function submitWidth() {
    var userWidth = document.getElementById('userWidth');
    document.getElementById("div2").style.width = userWidth.value + "px";
}

I forgot to put in getElement. 放在getElement中。 Bu now I have problem, my picture in div doesn't want to resize. So if someone have advice it is welcome.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM