如何通过同一页面将变量传递给javascript页面重新加载？

Question

假设我想在我的 html 代码中有一个文本框，用户可以输入地图的高度和宽度。 我希望我的 javascript 代码处理传递的变量并根据这些值生成地图。

这是我的问题。我不想使用笨重的 prompt() 函数，它真的很烦人，而且非常有限。 如果我使用表单标签，并放置一个提交按钮，它将刷新页面，我不希望这样，但我没有提交任何东西，只是将变量传递给我的脚本。

因为一切都将由 javascript 完成，并且不会将任何内容发送到服务器或任何类型的数据库，我希望所有内容都在同一页面上完成，无需重新加载或刷新，并显示结果用户单击按钮后立即。

我该怎么做？

<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>
顺便说一句，请确保输入元素的 ID 保持唯一。 您可以像这样获得用户输入：

<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。它们都是类似的解决方案，最好的解决方案取决于整个实现。

我打开了a small sample here 来展示如何用一个按钮来完成，代码归结为：

<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>

当然，您可以将 onclick 代码拆分为实际代码中的 Javascript。我使用 Mootools 制作了示例，但它很容易适应 jQuery 或非库 JS。