在 JavaScript 中單擊按鈕后刪除輸出

Question

因此，我希望在清除按鈕上刪除“tip”或“tipPerPerson”的 pid。 我讓它適用於字段，但它很少適用於按鈕。 在某些時候， document.getElementById 可以工作，但大多數時候它不工作。 我不知道為什么或何時清除這兩個結果，因為它是隨機的，但我希望每次都清除按鈕后的字段。

這是完整的代碼

HTML

<body>
    <div id="container">
        <h3>A Tip Calculator</h3>
        <h5>Finding a tip amount has never been so easy</h5>
        <div id="calculator">
            <p><label for="billAmount">Bill Amount</label><input type="text" id="billAmount"
                    onkeypress="return decimalValidation(this,event);"></p>
            <p><label for="tipAmount">Tip Amount</label><input type="text" id="tipAmount"
                    onkeypress="return decimalValidation(this,event);"></p>
            <p><label for="splitCheck">People Splitting Check</label><input type="text" id="splitCheck" value=1
                    onkeypress="return decimalValidation(this,event);"></p>
            <p><input type="submit" id="submitButton" value="Get Tip" onclick="getTip();"><input type="button"
                    id="clearPage" value="Clear" onclick="clearPage();"></p>
        </div>
        <p id="tip"></p>
        <p id="tipPerPerson"></p>
    </div>
</body>

JS

function clearPage() {
    document.getElementById("billAmount").value = " ";
    document.getElementById("tipAmount").value = " ";
    document.getElementById("splitCheck").value = " ";
    document.getElementById("splitCheck").value = " ";
    document.getElementById("tip").innerHTML = " ";
    document.getElementById("tipPerPerson").InnerHTML = " ";
}

先感謝您！

Answer 1

您可以將輸出的顯示樣式設置為display: none例如在下面的 js 代碼中。

我將 js 設置為display: none當點擊 clear 時，然后在重新計算提示時display: block 。

這是一個CodePen，展示了新代碼的工作原理

function getTip() {
var billAmount = Number(document.getElementById("billAmount").value);
var tipAmount = Number(document.getElementById("tipAmount").value);
var splitCheck = Number(document.getElementById("splitCheck").value);

if (billAmount == " ") {
    alert("Please enter a bill amount!");
    return false;
}

if (tipAmount == " ") {
    alert("Please enter a tip amount!");
    return false;
}

if (splitCheck == " ") {
    alert("Please enter the amount of people splitting the bill");
    return false;
}


var tipPercent = tipAmount / 100;
var tip = billAmount * tipPercent;

if (splitCheck == 1) {
    document.getElementById("tip").innerHTML = "Yor tip is $" + tip.toFixed(2);
} else {
    document.getElementById("tip").innerHTML = " ";
    document.getElementById("tipPerPerson").innerHTML = "Your tip Per Person is $" + (tip.toFixed(2) / splitCheck);
    document.getElementById("tipPerPerson").style.display = "block";
}



}


function clearPage() {
    document.getElementById("billAmount").value = " ";
    document.getElementById("tipAmount").value = " ";
    document.getElementById("splitCheck").value = " ";
    document.getElementById("splitCheck").value = " ";
    document.getElementById("tip").innerHTML = " ";
    document.getElementById("tipPerPerson").style.display = "none";
}

function decimalValidation(el, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode == 8) {
        return true;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //just one dot
    if (number.length > 1 && charCode == 46) {
        return false;
    }
    //get the carat position
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
        return false;
    }
    return true;
}

function getSelectionStart(o) {
    return o.selectionStart
}

在 JavaScript 中單擊按鈕后刪除輸出

問題描述

1 個解決方案

解決方案1
0 2020-01-30 19:05:12

在 JavaScript 中單擊按鈕后刪除輸出

問題描述

1 個解決方案

解決方案1 0 2020-01-30 19:05:12

解決方案1
0 2020-01-30 19:05:12