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

有几种方法可以做到这一点。您可以修补表单的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。

Answer 2

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

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

2 个答案: