CODEWITHSUNDEEP
javascripthtml
Matt Picca
Matt Picca

Reputation: 142

Basic javascript user-input changing div

I'm trying to change the width of a box using user-input with a for loop and if-else statement. Cant seem to get the first if statement to execute. Here is the javascript:

function changeWidth(){
    var widthSize = document.getElementById("num").value;
    for(var s = 0; s < widthSize; s++){
        if(s < 0 || s > 800){
            alert("Not a valid width size"); }
        else {
            document.getElementById("box-1").style.width="s";
        }
    }
}

The CSS: 

.box {
    border: 1px solid black; 
    width: 200px; 
    height: 200px; 
    float:left; 
    margin-left:30px;
}

The HTML:

<input type="number" id="num" name="num" value="" placeholder="Please enter width size" />
<input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1"></div>

Upvotes: 4

Views: 98

Answers (5)

Gowtham
Gowtham

Reputation: 1597

function changeWidth(){   

var widthSize=document.getElementById("num").value;
            for(var s=0;s<widthSize;s++){
                if(widthSize<0 || widthSize>800){
                    alert("Not a valid width size");
                break;
                }
                else{
                  var a ="transition:2s ease-in;width:"+widthSize+"px;"
                   document.getElementById("box-1").style.cssText=a;
                  
                }
            }
        
		}
.box{border:1px solid black; width:200px; height:200px; float:left; margin-left:30px;}
<input type="number" id="num" name="num" value="" placeholder="Please enter width size" />
<input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1"></div>  </body>

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19133

This should work...

function changeWidth() {
  var widthSize = parseInt(document.getElementById("num").value);
  if (widthSize < 0 || widthSize > 800) {
    alert("Not a valid width size");
  } else {
    document.getElementById("box-1").style.width = widthSize + 'px';
  }
}
.box {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  float: left;
  margin-left: 30px;
  transition: width 1s ease;
}
<input type="number" id="num" name="num" value="" placeholder="Please enter width size" /> <input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1">
  <div class="box-1-words" id="b1-words"> Hello World </div>
</div>

Upvotes: 1

Nathaniel
Nathaniel

Reputation: 952

If your trying to change the width several times, So you just need to remove the quotes for your variable s.

Like this:

document.getElementById("box-1").style.width=s;

But in case your trying to just set the value of widthSize, and just once, it maybe be like this:

document.getElementById("box-1").style.width=widthSize;
return;

Upvotes: 2

snit80
snit80

Reputation: 731

s will never be less than 0 as thats the min value for your for loop and if the number u input is less than 800 then the IF condition will never execute. Are you entering a number more than 800 and still the alert is not showing up?

Upvotes: 0

user2182349
user2182349

Reputation: 9782

You don't need a loop, this should do it.

function changeWidth(){
    var widthSize=document.getElementById("num").value;
    if(widthSize < 0 || widthSize > 800){
        alert("Not a valid width size"); }
    else {
        document.getElementById("box-1").style.width=widthSize+"px";
    }
}

Upvotes: 3

Related Questions