HTML表单JS模态框与输入处理问题：Evidence Received条件失效

开发一款用于捕获转账金额的HTML表单，通过JavaScript处理模态框交互和输入验证：

• 当转账金额≥10000时，弹出IA（Information Assurance）状态验证模态框
• 若IA状态未认证，继续弹出凭证收取状态模态框
• 点击“Evidence Received”按钮后，应弹出WI#参考编号输入框，提交表单时输出需包含该编号，但目前此条件逻辑失效，输出未显示WI#内容

以下是原始代码：

<!-- 原始HTML代码 -->
<!-- Input field for the transfer value -->
Transfer Value:

<br><br>

<!-- Submit button -->
<button id="submitButton">Submit</button>

<!-- Modal dialog for IA status -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <h2>Is IA status Authenticated?</h2>
        <button class="modal-button modal-button-yes" id="modalButtonYes" data-selected="false">Yes</button>
        <button class="modal-button modal-button-no" id="modalButtonNo" data-selected="false">No</button>
    </div>
</div>

<!-- Modal dialog for Evidence received -->
<div id="evidenceModal" class="modal">
    <div class="modal-content">
        <h2>Is evidence received?</h2>
        <button class="modal-button modal-button-yes" id="evidenceButtonYes" data-selected="false">Yes</button>
        <button class="modal-button modal-button-no" id="evidenceButtonNo" data-selected="false">No</button>
    </div>
</div>

<div id="wiModal" class="modal wi-modal">
    <div class="modal-content">
        <h2>Enter WI# Reference Number:</h2>
        <input type="text" id="wiInput" placeholder="Enter WI# reference number">
        <button class="modal-button modal-button-yes" id="wiSaveButton">Save</button>
    </div>
</div>

<!-- Output div -->
<div id="output"></div>

/* 原始CSS代码 */
/* Styles for the modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 50%;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

/* Styles for the button */
.modal-button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-button-yes {
    background-color: green;
    color: white;
}

.modal-button-no {
    background-color: red;
    color: white;
}

/* Styles for the WI# modal */
.wi-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.wi-modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 50%;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

/* Styles for the WI# input field */
#wiInput {
    width: 80%;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Styles for the "Save" button */
#wiSaveButton {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: green;
    color: white;
}

/* Styles for the output */
#output {
    display: none;
    font-size: 18px;
    margin-top: 20px;
}

// 原始JavaScript代码
const transferValueInput = document.getElementById('transferValue');
const submitButton = document.getElementById('submitButton');
const outputDiv = document.getElementById('output');
const modal = document.getElementById('myModal');
const modalButtonYes = document.getElementById('modalButtonYes');
const modalButtonNo = document.getElementById('modalButtonNo');
const evidenceModal = document.getElementById('evidenceModal');
const evidenceButtonYes = document.getElementById('evidenceButtonYes');
const evidenceButtonNo = document.getElementById('evidenceButtonNo');
const wiModal = document.getElementById('wiModal');
const wiInput = document.getElementById('wiInput');
const wiSaveButton = document.getElementById('wiSaveButton');

// Function to handle form submission
function handleSubmit(event) {
    event.preventDefault(); // Prevent the form from submitting
    const transferValue = parseFloat(transferValueInput.value);
    let outputText = `Transfer Value: ${transferValue}`;
    let iaStatus = modalButtonYes.getAttribute('data-selected') === 'true';
    const evidenceRequired = evidenceButtonNo.getAttribute('data-selected') === 'false';
    const evidenceReceived = evidenceButtonYes.getAttribute('data-selected') === 'true';

    if (!isNaN(transferValue) && transferValue >= 10000) {
        if (iaStatus) {
            outputText += " (IA status is authenticated).";
        } else if (evidenceRequired) {
            outputText += " (Evidence required as transfer value is above 10k).";
        } else if (evidenceReceived) {
            outputText += ` WI# Reference: ${wiInput.value}`;
        }
    }

    outputDiv.innerHTML = outputText;
    outputDiv.style.display = 'block'; // Show the output
}

// Function to hide the evidence received modal
function hideEvidenceModal() {
    evidenceModal.style display = 'none';
}

// Function to show the modal
function showModal() {
    modal.style.display = 'block';
}

// Function to hide the modal
function hideModal() {
    modal.style.display = 'none';
}

// Function to show the evidence received modal
function showEvidenceModal() {
    evidenceModal.style.display = 'block';
}

// Function to hide the evidence received modal
function hideEvidenceModal() {
    evidenceModal.style.display = 'none';
}

// Function to show the WI# modal
function showWiModal() {
    wiModal.style.display = 'block';
}

// Function to hide the WI# modal
function hideWiModal() {
    wiModal.style.display = 'none';
}

// Event listener for the "Yes" button in the IA status modal
modalButtonYes.addEventListener('click', () => {
    modalButtonYes.setAttribute('data-selected', 'true');
    hideModal();
});

modalButtonNo.addEventListener('click', () => {
    modalButtonYes.setAttribute('data-selected', 'false');
    hideModal();
    showEvidenceModal();
});

evidenceButtonYes.addEventListener('click', () => {
    evidenceButtonYes.setAttribute('data-selected', 'true');
    hideEvidenceModal();
    showWiModal();
});

// Event listener for the "No" button in the IA status modal
modalButtonNo.addEventListener('click', () => {
    modalButtonYes.setAttribute('data-selected', 'false');
    hideModal();
    showEvidenceModal();
});

// Event listeners for "No" button in evidenceModal and form submission
evidenceButtonNo.addEventListener('click', () => {
    evidenceButtonNo.setAttribute('data-selected', 'false');
    hideEvidenceModal();
});

// Event listener to show the IA status modal when transfer value is above 10k
transferValueInput.addEventListener('input', () => {
    const transferValue = parseFloat(transferValueInput.value);
    if (!isNaN(transferValue) && transferValue > 10000) {
        showModal();
    } else {
        hideModal();
    }
});

// Event listener to save the Wi refernce input from user
wiSaveButton.addEventListener('click', () => {
    hideWiModal();
});

// Attach event listeners
submitButton.addEventListener('click', handleSubmit);

问题定位与修复方案 #

核心问题点

1. 条件判断逻辑顺序错误：
   handleSubmit中evidenceRequired的判断优先级高于evidenceReceived，且evidenceRequired的逻辑错误——点击evidenceButtonYes时，evidenceButtonNo的data-selected仍为初始值false，导致evidenceRequired始终成立，拦截了后续的evidenceReceived判断。

2. 语法错误：
   hideEvidenceModal函数存在语法错误：evidenceModal.style display = 'none'; 应改为evidenceModal.style.display = 'none';，无法正常隐藏凭证模态框。

3. HTML缺失核心输入框：
   缺少id="transferValue"的转账金额输入框，导致金额输入功能完全失效。

4. 重复事件绑定：
   modalButtonNo被重复绑定两次点击事件，属于冗余代码。

5. 状态未互斥更新：
   点击凭证模态框的Yes/No按钮时，未同步更新对方按钮的data-selected状态，导致状态判断混乱。

修复后的完整代码

HTML（补全输入框）

<!-- Input field for the transfer value -->
Transfer Value:
<input type="number" id="transferValue" placeholder="Enter transfer amount">
<br><br>

<!-- Submit button -->
<button id="submitButton">Submit</button>

<!-- Modal dialog for IA status -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <h2>Is IA status Authenticated?</h2>
        <button class="modal-button modal-button-yes" id="modalButtonYes" data-selected="false">Yes</button>
        <button class="modal-button modal-button-no" id="modalButtonNo" data-selected="false">No</button>
    </div>
</div>

<!-- Modal dialog for Evidence received -->
<div id="evidenceModal" class="modal">
    <div class="modal-content">
        <h2>Is evidence received?</h2>
        <button class="modal-button modal-button-yes" id="evidenceButtonYes" data-selected="false">Yes</button>
        <button class="modal-button modal-button-no" id="evidenceButtonNo" data-selected="false">No</button>
    </div>
</div>

<div id="wiModal" class="modal wi-modal">
    <div class="modal-content">
        <h2>Enter WI# Reference Number:</h2>
        <input type="text" id="wiInput" placeholder="Enter WI# reference number">
        <button class="modal-button modal-button-yes" id="wiSaveButton">Save</button>
    </div>
</div>

<!-- Output div -->
<div id="output"></div>

CSS（无修改）

/* Styles for the modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 50%;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

/* Styles for the button */
.modal-button {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-button-yes {
    background-color: green;
    color: white;
}

.modal-button-no {
    background-color: red;
    color: white;
}

/* Styles for the WI# modal */
.wi-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.wi-modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    width: 50%;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

/* Styles for the WI# input field */
#wiInput {
    width: 80%;
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Styles for the "Save" button */
#wiSaveButton {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: green;
    color: white;
}

/* Styles for the output */
#output {
    display: none;
    font-size: 18px;
    margin-top: 20px;
}

JavaScript（修复逻辑、语法和冗余代码）

const transferValueInput = document.getElementById('transferValue');
const submitButton = document.getElementById('submitButton');
const outputDiv = document.getElementById('output');
const modal = document.getElementById('myModal');
const modalButtonYes = document.getElementById('modalButtonYes');
const modalButtonNo = document.getElementById('modalButtonNo');
const evidenceModal = document.getElementById('evidenceModal');
const evidenceButtonYes = document.getElementById('evidenceButtonYes');
const evidenceButtonNo = document.getElementById('evidenceButtonNo');
const wiModal = document.getElementById('wiModal');
const wiInput = document.getElementById('wiInput');
const wiSaveButton = document.getElementById('wiSaveButton');

// 处理表单提交
function handleSubmit(event) {
    event.preventDefault();
    const transferValue = parseFloat(transferValueInput.value);
    let outputText = `Transfer Value: ${transferValue}`;
    const iaStatus = modalButtonYes.getAttribute('data-selected') === 'true';
    const evidenceReceived = evidenceButtonYes.getAttribute('data-selected') === 'true';
    const evidenceRequired = !evidenceReceived && evidenceButtonNo.getAttribute('data-selected') === 'true';

    if (!isNaN(transferValue) && transferValue >= 10000) {
        if (iaStatus) {
            outputText += " (IA status is authenticated).";
        } else if (evidenceReceived) {
            outputText += ` WI# Reference: ${wiInput.value}`;
        } else if (evidenceRequired) {
            outputText += " (Evidence required as transfer value is above 10k).";
        } else {
            outputText += " (Evidence not received).";
        }
    }

    outputDiv.innerHTML = outputText;
    outputDiv.style.display = 'block';
}

// 隐藏凭证模态框
function hideEvidenceModal() {
    evidenceModal.style.display = 'none';
}

// 显示IA模态框
function showModal() {
    modal.style.display = 'block';
}

// 隐藏IA模态框
function hideModal() {
    modal.style.display = 'none';
}

// 显示凭证模态框
function showEvidenceModal() {
    evidenceModal.style.display = 'block';
}

// 显示WI#模态框
function showWiModal() {
    wiModal.style.display = 'block';
}

// 隐藏WI#模态框
function hideWiModal() {
    wiModal.style.display = 'none';
}

// IA模态框Yes按钮事件
modalButtonYes.addEventListener('click', () => {
    modalButtonYes.setAttribute('data-selected', 'true');
    hideModal();
});

// IA模态框No按钮事件
modalButtonNo.addEventListener('click', () => {
    modalButtonYes.setAttribute('data-selected', 'false');
    hideModal();
    showEvidenceModal();
});

// 凭证模态框Yes按钮事件
evidenceButtonYes.addEventListener('click', () => {
    evidenceButtonYes.setAttribute('data-selected', 'true');
    evidenceButtonNo.setAttribute('data-selected', 'false');
    hideEvidenceModal();
    showWiModal();