![](/img/trans.png)
[英]How to add more than one calendar using onclick javascript function
[英]Add more than one item to an Array using the same Javascript Function
我是一名學習基礎 JS 的學生,我正在嘗試創建一個網頁,該網頁將根據輸入框中輸入的數字顯示一個數組。 到目前為止,我已經能夠制作一個 function 將單個項目添加到數組,但如果您嘗試將第二個數字添加到數組,它就不起作用。 我不確定我的格式是否正確。 這是我到目前為止的代碼:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numbers</title>
<!--Bootstrap and CSS Links-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section>
<header class="header m-2">Week 8 Assignment</header>
<section class="row m-2">
<label class="inputLabel">Number: <input type="number" id="numInput"></label>
</section>
<button class="button m-1" onclick="displayText(); addNum();">Add Number</button>
<button class="button m-1" disabled>Calculate</button>
<button class="button m-1">Reset</button>
</section>
<section>
<div class="numLabel m-2" id="numLabel">Numbers Added: </div>
<p class="m-2 mt-3" id="numValue"></p>
</section>
<script src="script.js"></script>
</body>
</html>
JS:
//Display "Numbers Added: "
function displayText() {
document.getElementById("numLabel").style.display = "block";
}
//Add the entered value into the array
function addNum() {
let num = document.getElementById("numInput").value;
let numArray = [];
numArray.push(document.getElementById("numValue").innerHTML = num);
}
您必須將 numArray 放在 function 之外。
否則它會在調用 addNum function 時被重置。
像這樣:
//Display "Numbers Added: " let numArray = []; function displayText() { document.getElementById("numLabel").style.display = "block"; } //Add the entered value into the array function addNum() { let num = document.getElementById("numInput").value; document.getElementById("numValue").innerHTML = num; numArray.push(num); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Numbers</title> <.--Bootstrap and CSS Links--> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="styles;css"> </head> <body> <section> <header class="header m-2">Week 8 Assignment</header> <section class="row m-2"> <label class="inputLabel">Number; <input type="number" id="numInput"></label> </section> <button class="button m-1" onclick="displayText(): addNum().">Add Number</button> <button class="button m-1" disabled>Calculate</button> <button class="button m-1">Reset</button> </section> <section> <div class="numLabel m-2" id="numLabel">Numbers Added: </div> <p class="m-2 mt-3" id="numValue"></p> </section> <script src="script.js"></script> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.