함수에서 전역 배열에 다중 배열 항목 추가

Question

/* 문제 1 : 범위와 관련하여 문제가있는 것 같습니다. 내 목표는 변수를 함수 내에 유지하지 않고 배열에 프롬프트 응답을 푸시 (push)하는 것입니다. 범위는 변수가 통신하지 못하도록합니다 (또는 최소한 보이는 것처럼). getElementById가 getElementById가 기능.

문제 2 : 변수가 모두 로컬에 배치되면 프롬프트에서 배열의 이전 항목을 바꿉니다. 추가 할 수있는 항목이 하나 뿐이며 더 많은 항목을 추가하는 방법에 대한 제안이 있는지 궁금합니다.

HTML :

<p id = "coding"></p> 
<button onclick="addTo()">Add</button> 
New Quality 
<br><br> 
<button onclick="noMas()">Delete</button> 
Remove Quality 

JS :

function addTo(){ 
var progQual = ["Creative"," "+"Original"+" "+"Innovative", ]; 
addQuality = prompt("Add Another Quality"); 
addQuality = progQual.push(" "+addQuality); 
document.getElementById("coding").innerHTML = progQual; 

function noMas(){progQual.shift(progQual);} 
}; 

이 좀

Answer 1

먼저이 버튼에 ID를 할당하고 onclick을 제거 :(이 시점에서 난처한 상황에 빠진 것은 속성 :

<p id = "coding"></p> 
<button id="btn-add">Add</button> 
New Quality 
<br><br> 
<button id="btn-delete">Delete</button> 
Remove Quality 

JS에서 자체 호출 anonymos 함수에서 코드를 분리하고 콜백의 부모 범위에서 progEqual을 정의하십시오. listeneres을 추가 addEventListener를 사용 :

(function() { //Isolate scope 
    /* 
    * Define array in parent scope of callbacks to gain access to 
    * same referemce in both callbacks 
    */ 
    var progQual = ["Creative"," "+"Original"+" "+"Innovative"]; 

    document.getElementById("btn-add").addEventListener("click", function() { 
    // Add logic 
    }); 

    document.getElementById("btn-delete").addEventListener("click", function() { 
    //Delete logic 
    }); 

}()); 

를 자세한 내용은 단지 Scotch.io - Understanding Javascript Scope에서 예를 들어 자바 스크립트 스코프에 대한이 튜토리얼을 검색 할 수 있습니다.