1

假设我想在我的 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>
4

2 回答 2

1

就像 Niels 说的，你可以使用<button onclick="getMapSize()" >Generate map</button>
Btw，确保输入元素的 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>
于 2013-05-15T00:43:58.527 回答
1

有几种方法。您可以修补onsubmit表单的 ，false在最后返回，或者完全省略表单并作用于<button>元素的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>

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

于 2013-05-15T00:11:48.550 回答