Question

在我提供一堆代码之前，我想首先找出我尝试做的事情是否可行。

我使用HTML＆amp; amp;创建了一个名为PIG的基于网络的骰子游戏版本。 JavaScript的。用户可以通过点击＆＃34;设置＆＃34;来更改某些游戏的设置。主页面上的按钮。此按钮将打开一个包含HTML表单（）的模式窗口。我想使用用户在此表单上输入和提交的数据来更新游戏主页上的各种设置。

我选择使用HTML5表单，因为希望使用本机HTML5表单验证功能，而不是尝试使用JavaScript自行复制验证检查逻辑。

所以我的方法是使用javascript从提交表单中获取数据。我尝试了两种不同的方法来实现这一点：

1）使用＆＃34; onsubmit = function getSettings（）＆＃34;在标签上 2）使用带有onclick =＆＃34; getSettings（）＆＃34;的表单的提交按钮。

使用这两种方法，我能够在提交时成功获取表单中的所有值，并使用gettSettings（）函数成功填充主游戏页面，但是当我退出getSettings（）函数时，网页我更新的值不会粘贴......无论我使用哪两种方法，它们都会恢复原始值。

我知道值已成功更新，因为当我在getSettings（）方法的最后一个语句上设置断点时，我可以看到主页面上的所有值都已更新，以反映填写的内容表单......所以我知道我已成功获取所有数据并使用这些值更新主页。

我很困惑为什么我在网页上成功更改的值只是在退出getSettings（）函数后恢复为原始值。

也许它不可能做我想要做的事情？如果不是，有人知道为什么我可以看到值在成功更改之前还原回到原来的价值。我错过了什么？

我再次使用表单并收集提交数据，以便我可以利用＆＃34; native＆＃34; HTML5表单验证功能。

的问候。

*****编辑添加代码的主要部分*******

以下是模式表单的代码HTML代码：

<form name="config-settings" onsubmit="getSettings()">
    <!--                <form name="config-settings">-->
    <span class="errMsg"></span>

    <div class="row clearfix">
        <div>
            <label>Player 1:</label>
        </div>
        <div>
            <input type="text" name="input-name-0" id="input-name-0" maxlength="10" placeholder="Enter name" pattern="^\S+$">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Player 2:</label>
        </div>
        <div>
            <input type="text" name="input-name-1" id="input-name-1" maxlength="6" placeholder="Enter name" pattern="^\S+$">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Winning Score:</label>
        </div>
        <div>
            <input type="number" name="winning-score" id="winning-score" default="100" placeholder="Enter winning score">
        </div>
    </div>
    <div class="row clearfix">
        <div>
            <label>Number of Dice:</label>
        </div>
        <div>
            <select name="diceValues" id="dice-value">
              <option value=""> - Select - </option>
              <option value="dice-1">One Dice</option> 
              <option value="dice-2">Two Dice</option> 
            </select>
        </div>
    </div>
    <!--    Below is alt method I used to submit form..yields same results      -->
    <!--    <input type="submit" value="Submit" onclick="getSettings()">-->
    <input type="submit" value="Submit">
</form>

以下是在getSettings（）方法中定义和使用的全局变量：

// Global variables
var scores, roundScore, activePlayer, gamePlaying, gamesWonCount, playerNames, winningScore, numOfDice, matchScore, msgs;
var player0, player1, score;
var player0Field = document.getElementById('name-0');
var player1Field = document.getElementById('name-1');
var scoreField = document.getElementById('winScore');

以下是主网页上“设置”按钮的监听器，它会显示包含设置表单的设置模式窗口：

//*********************************************************
// Open Settings Modal Windows 
//*********************************************************
document.querySelector('.btn-settings').addEventListener('click', function () {

    // Settings can't be changed if game is actively underway
    if (!gamePlaying || roundScore === 0) {
        document.querySelector('#modal-settings').style.display = 'block';
    } else {
        // Make error message visible
        msgs.style = 'block';
        // Create message to indicate settings successfully updated     
        msgs.textContent = "Settings can't be updated during game";
        msgs.style.backgroundColor = 'pink';
        fadeOut(msgs);
    }
});

这是getSettings（）javaScript函数（注意：此函数中没有定义局部变量......它们都被定义为全局值（javaScript app的前几行）。

function getSettings() {
    // Alternative call if I want this function to be called via eventListner
    //document.querySelector('.btn-save').addEventListener('click', function () {

    console.log("getSettings method called");

    player0 = document.forms["config-settings"]["input-name-0"].value;
    player1 = document.forms["config-settings"]["input-name-1"].value;
    score = document.forms["config-settings"]["winning-score"].value;

    // Reset msgs so they will be displayed each time
    msgs.style = 'block';

    playerNames[0] = player0;
    player0Field.innerHTML = playerNames[0];

    playerNames[1] = player1;
    player1Field.textContent = playerNames[1];

    // Set Winning score on UI to value on form
    scoreField.textContent = score;

    //  numOfDice = document.getElementById('dice-value').value;

    // Create message to indicate settings successfully updated     
    msgs.textContent = "Successfully updated settings";
    msgs.style.backgroundColor = 'lightgreen';
    fadeOut(msgs);
    document.querySelector('#modal-settings').style.display = 'none';
}

Answer 1

我不知道你的 getSettings（）函数到底应该做什么，但我可以尝试给你一些建议：

所有使用过的浏览器并不完全支持HTML5的某些表单验证功能（某些用户不想更新其浏览器）。因此，依赖HTML5的“本机”验证并不是最佳实践。
如果您想在提交表单之前以任何方式操作表单值，我宁愿为点击事件的提交按钮添加一个监听器，阻止任何其他操作，对表单数据进行检查/操作，然后手动提交表格。无论如何，前端验证并不是完全安全的，所以如果你在兜售敏感数据，你必须在服务器端进行检查（如果你的应用使用服务器）。

举例说明我之前解释的内容：

document.getElementById("myBtn").addEventListener("click", function(event){
    //Stops the form submitting.
    event.stopImmediatePropagation();

    //Do the checks here.

    //Sends the form.
    document.getelementById("myForm").sumbit();
);

如果更改此getSettings（）函数中的局部变量，则仅在函数范围内更改变量。您可能想要阅读javascript中的范围。（这只是一个有根据的猜测）。

我希望你觉得这很有用，祝你好运！

Answer 2

好的......我终于明白了！这个问题不是一个范围问题，而是问题＆＃34; onSubmit＆＃34;作品。

解决方案包括进行两项更改：

1）在＆＃34; onsubmit＆＃34;中添加一个return语句。调用＆＃34; getSettings（）＆＃34;时的属性功能;

<form name="config-settings" onsubmit="return getSettings()">

2）在gettSettings（）;

结束时返回false

return false;

注意：我之前尝试过返回true但不是false。我错误地认为从getSettings（）函数返回false值会禁用HTML5＆＃34; native＆＃34;验证并强迫我自己实施所有错误检查......这不是我想要的。现在我的理解是，返回false只会阻止提交表单..但它不会禁用HTML5本机验证。

这个解决方案对我来说非常合适，因为我的目标不是将表单提交给服务器（因为这里没有服务器组件），而只是使用＆＃34; native＆＃34; HTML5表单检查然后更新本地网页上的值。

尽管如此，我仍然不完全确定为什么当我没有提供退货声明或当我返回时为什么我的所有更改都恢复到原来的值。如果有人能说清楚为什么我会欣赏它。

干杯

使用表单数据更新网页

2 个答案: