基本javascript用戶輸入更改div

我正在嘗試使用用戶輸入的for循環和if-else語句更改框的寬度。似乎不能得到第一個if語句執行。這裏是JavaScript：基本javascript用戶輸入更改div

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

的CSS：

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

的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>

來源

2016-09-16 Matt Picca

我已經編輯了後，現在它是可見 – Gowtham

*「的HTML不顯示」 * - 您需要通過四個空格縮進它在每行（或者你可以選擇它，然後按下編輯工具欄中的「{}」按鈕）。 – nnnnnn

真棒謝謝你！ –

你並不需要一個循環，這應該這樣做。

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

來源

2016-09-16 03:54:44 user2182349

雖然簡單，但我仍然無法得到執行的警報 –

旨意永遠不會小於0作爲你那min值for循環，並且如果數u輸入小於800然後IF條件永遠不會執行。您是否輸入了超過800的號碼，但仍未顯示警報？

來源

2016-09-16 04:00:12 snit80

這有道理嗎？ – snit80

沒有什麼引起我的困惑是輸入類型可以向下滾動到負數，所以我希望它提醒用戶，如果他們決定向下滾動到底片。當＃> 800只是當它不是<0 –

是的像我說的for循環的最小值爲0，你正在增加它，所以它永遠不會小於0 – snit80

如果您試圖多次改變寬度，那麼您只需要刪除變量s的引號。

像這樣：

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

但如果你想剛纔設置widthSize的價值，只有一次，這也許是這樣的：

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

來源

2016-09-16 04:01:22 Nathaniel

這應該工作...

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>

來源

2016-09-16 04:01:47

愛過渡效果，謝謝！雖然爲什麼parseInt包含在第2行，如果輸入類型=「數字」？ –

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

.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>

來源

2016-09-16 04:02:11 Gowtham

基本javascript用戶輸入更改div

回答

相關問題