자바 스크립트 페이지 리로드로 같은 페이지를 통해 변수를 전달하는 방법?

Question

사용자가지도의 높이와 너비를 입력하는 텍스트 상자에 html 코드를 넣고 싶습니다. 그리고 전달 된 변수를 처리하고 값을 기반으로지도를 생성하는 자바 스크립트 코드를 원합니다.

여기 내 문제입니다. clunky prompt() 함수를 사용하고 싶지 않습니다. 정말 짜증이 나서 매우 제한적입니다. form 태그를 사용하고 제출 버튼을 누르면 페이지가 새로 고쳐지기를 원하지만 나는 아무것도 제출하지 않고 스크립트에만 변수를 전달합니다.

모든 것이 자바 스크립트로 이루어지기 때문에 서버 나 모든 종류의 데이터베이스로 전송할 것이 없기 때문에 모든 페이지를 다시로드하거나 새로 고치지 않고 결과를 모두 확인해야합니다. 사용자가 버튼을 클릭 한 직후에 표시됩니다.

어떻게하면됩니까?

<script> 
function validateInput() { 
// check if the values are numbers if not generate an error and return a false value 
} 
function getMapSize() { 
// get the user input data and return it as an array 
} 

function generateMap() { 
var map = []; 
map = getMapSize(); 
// generate the map and show the result on current page 
} 
if (variables are set and they are numbers) { 
generateMap(); 
} 
</script> 
Height:<input id="mapSize" name="mapHeight" type="text"></input> 
Width:<input id="mapSize" name="mapWidth" type="text"></input> 

Answer 1

Niels와 마찬가지로 <button onclick="getMapSize()" >Generate map</button>
Btw를 사용할 수 있으며 입력 요소의 ID를 고유하게 유지해야합니다. 당신은이 같은 UserInput 사용자가 뭔가 얻을 수 있습니다 : 나는 확신

<script> 

function getMapSize() { 
    var height = document.getElementById('mapHeight').value; 
    var width = document.getElementById('mapWidth').value; 

    if (validateInput(height) == true && validateInput(width) == true) { 
     generateMap(height, width); 
    } 
} 

function validateInput(input) { 
    // Validate input... 

    if (isValid) { 
     return true; 
    } else { 
     return false; 
    } 
} 

function generateMap(height, width) { 
    // Generate map with the given height and width 
} 

</script> 

Answer 2

여기에는 여러 가지 방법이 있습니다. 양식의 onsubmit을 패치하거나 끝에 false을 반환하거나 양식을 완전히 생략하고 <button> 요소의 onclick에 대해 조치를 취할 수 있습니다. 그것들은 모두 비슷한 솔루션이며, 최선의 구현은 전체 구현에 달려 있습니다. 물론 당신이 진짜 코드에서 자바 스크립트를 분리하기 위해 밖으로 onclick 코드를 분할 것

<label>Width: <input type="number" id="width" value="5"></label><br> 
<label>Height: <input type="number" id="height" value="5"></label><br> 
<button onclick="$('output').set('text', 'Surface size is ' 
       + ($('width').value * $('height').value));">Click me!</button> 
<div id="output">Not clicked yet</div> 

:

가 나는 버튼으로 작업을 수행하는 방법을 보여 a small sample here을 채찍질 코드로 요약된다. 샘플을 Mootools로 채웠지 만 jQuery 또는 비 라이브러리 JS에 쉽게 적용 할 수 있습니다.