JavaScript 模式和 HTML 表单输入处理问题

问题描述 投票：0回答：1

我目前正在开发一个 HTML 表单，它使用 JavaScript 来处理模式和输入验证。该表格旨在捕获转移值，并根据该值显示 IA（信息保证）状态和收到的证据的模式。但是，我遇到了“已收到证据”条件未按预期工作的问题。

这是 HTML 结构和 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);
/* 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;
}
<!-- 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>

我面临的问题是，当单击“已收到证据”按钮（数据选择设置为“true”）时，预期输出应包括“WI# Reference”以及在模式中输入的参考号。但这并没有发生。我没有得到所需的输出。

我检查了逻辑，对我来说似乎很好，但我遗漏了一些东西。有人可以帮我找出问题并使“证据已收到”条件正常工作吗？

javascript html css user-input event-listener
1个回答
0
投票

您的问题出在这一段代码中。您只会在需要时收到证据，但您永远不会达到 

evidenceReceived
的测试，因为 
evidenceRequired
测试先于它。

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}`;
    }
}

解决方案是颠倒这些测试的顺序。这是我在下面的代码片段中包含的解决方案。

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).";
    }
}


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 (evidenceReceived) {
            outputText += ` WI# Reference: ${wiInput.value}`;
        } else if (evidenceRequired) {
            outputText += " (Evidence required as transfer value is above 10k).";
        }
    }

    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);
/* 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;
}
<!-- Input field for the transfer value -->
Transfer Value:
<input id="transferValue" type="text">

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

另一种可能的解决方案是在第二次测试中添加一个额外的条件，以防止出现以下情况：

if (!isNaN(transferValue) && transferValue >= 10000) {
    if (iaStatus) {
        outputText += " (IA status is authenticated).";
    } else if (evidenceRequired && !evidenceReceived) {
        outputText += " (Evidence required as transfer value is above 10k).";
    } else if (evidenceReceived) {
        outputText += ` WI# Reference: ${wiInput.value}`;
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.