मैं बुनियादी जेएस सीखने वाला छात्र हूं और मैं एक वेबपेज बनाने की कोशिश कर रहा हूं जो इनपुट बॉक्स में दर्ज संख्याओं के आधार पर एक सरणी प्रदर्शित करेगा। अब तक मैं एक ऐसा फ़ंक्शन बनाने में सक्षम हूं जो सरणी में एक आइटम जोड़ता है, लेकिन यदि आप सरणी में दूसरी संख्या जोड़ने का प्रयास करते हैं तो यह काम नहीं करता है। मुझे यकीन नहीं है कि मैं इसे सही तरीके से स्वरूपित कर रहा हूं। यह वह कोड है जो मेरे पास अब तक है:

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);
}
1
Acuff558 5 मार्च 2020, 00:03
देखें Array.splice
 – 
ControlAltDel
5 मार्च 2020, 00:04

2 जवाब

हर बार जब आप फ़ंक्शन को कॉल करते हैं तो आप अपनी सरणी को फिर से घोषित कर रहे हैं।


    let numArray = [];
function addNum() {
    let num = document.getElementById("numInput").value;


    numArray.push(document.getElementById("numValue").innerHTML = num);
}
4
michaeljones55 5 मार्च 2020, 00:05
मैं देखता हूं, टिप्पणी के लिए धन्यवाद। इसने मुझे निश्चित रूप से कार्यों में सरणियों की बेहतर समझ दी।
 – 
Acuff558
5 मार्च 2020, 00:36

चूंकि आप फ़ंक्शन के अंदर सरणी घोषित कर रहे हैं, बटन के प्रत्येक क्लिक में नया सरणी बना रहा है (पिछले एक को हटा रहा है)।

आपको फ़ंक्शन के बाहर सरणी घोषित करनी चाहिए और सरणी से टेक्स्ट सामग्री संपत्ति को join() के साथ सेट करना चाहिए

//Display "Numbers Added: " 
function displayText() {
    document.getElementById("numLabel").style.display = "block";
}

//Add the entered value into the array
let numArray = [];
function addNum() {
  let num = document.getElementById("numInput").value;
  numArray.push(num);
  document.getElementById("numValue").textContent = numArray.join(', ');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<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>
0
Mamun 5 मार्च 2020, 00:08