2016-02-04 45 views
0

我希望用戶能夠將URL添加到提交框中,然後它將在數組中並按順序顯示。我希望這可以在點擊提交時發生多次。如何將用戶輸入「刷」到陣列中

這是我在哪裏,但它搜索我的計算機的網址,而不是網絡。

<!DOCTYPE html> 
<html> 
<head> 
<title>images</title> 
</head> 
<body> 
<input type="text" id="user_input" /> 
<button onClick="add()">ADD</button> 
<img id="light" width="10%"> 
<button onclick="colourChange()">Click Me To Cycle Through The Colours</button> 
<script> 
var x=1 
var user = document.getElementById("user_input"); 
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"]; 

document.getElementById("light").src = colour[0]; 
function add(){ 
colour.push(user); 
} 

function colourChange(){ 
    document.getElementById("light").src = colour[x]; 
    x += 1; 
    if (x == colour.length) x = 0 
} 
</script> 

</body> 
</html> 
+0

使用瀏覽器控制檯查看錯誤。沒有數組'水果'。還必須防止表單提交或頁面將重新加載 – charlietfl

+0

onsubmit =「返回false」var newVal = document.getElementById('url').value; colour.push(newVal); –

回答

0

如果您希望在用戶重新加載頁面時重置此項,則不需要使用表單。

<input type="text" id="user_input" /> 
<button onClick=add()>ADD</button> 

而你的附加功能

function add(){ 
    var newVal = document.getElementById('user_input').value; 
    fruits.push(newVal); //assuming your array is named fruits, I can't see in your code where you have defined it. 
} 
0

var imageInput = document.querySelector("input[name=url]"); 
function add(evnt){ 
    evnt.preventDefault(); 
    colour.push(imageInput.value); 
    return false; 
} 
0

首先更換你的附加功能,你需要聲明數組你努力推動它。 var fruits = []; 然後在你的add函數中,獲取url元素並推送到你先前聲明的數組。如果你給該元素一個id,這很方便。 function add() { fruits.push(document.getElementById('url').value); }

<!DOCTYPE html> 
<html> 
    <head> 
    <title>images</title> 
    </head> 
    <body> 
    <form id="user"> 
     insert an image URL to add to cycle: <input type="text" id="url" name="url"><br> 
     <button onclick="add()">ADD</button> 
    </form> 
    <img id="light" width="10%"> 
    <button onclick="colourChange()">Click Me To Cycle Through The Colours</button> 

    <script> 
    var x = 1; 
    var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"]; 
    var fruits = []; 
    document.getElementById("light").src = colour[0]; 
    var url = document.getElementById('url'); 

    function add(){ 
     fruits.push(url.value); 
    } 

    function colourChange(){ 
     document.getElementById("light").src = colour[x]; 
     x += 1; 
     if (x == colour.length) x = 0 
    } 
    </script> 
    </body> 
</html> 
+0

對不起,它意味着將其推入彩色數組,將其更改爲colour.push – buffet

0

添加到從標籤onsubmit="return false"並查看其在下面行中提到add()功能。

var x=1 
 
var colour = ["red.gif", "amber1.gif", "green.gif", "amber1.gif"]; 
 
document.getElementById("light").src = colour[0]; 
 
function add(){ \t \t \t \t 
 
    var newVal = document.getElementById('url').value; 
 
    colour.push(newVal); 
 
    document.getElementById('url').value = '';; 
 
} 
 
function colourChange(){ 
 
    document.getElementById("light").src = colour[x]; 
 
    x += 1; 
 
    if (x == colour.length) x = 0 
 
}
<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <title>images</title> 
 
     </head> 
 
     <body> 
 
      <form id="user" onsubmit="return false"> 
 
       insert an image URL to add to cycle: <input type="text" name="url" id="url"><br> 
 
       <input type="submit" value="Submit" onclick="add()"> 
 
      </form> 
 
      <img id="light" width="10%"> 
 
      <button onclick="colourChange()">Click Me To Cycle Through The Colours</button> 
 
      
 
     </body> 
 
    </html>