javascript - 在 JavaScript 中单击按钮后删除输出

问题描述

所以，我想在清除按钮上删除“tip”或“tipPerPerson”的 p id。我让它适用于这些领域，但它很少适用于按钮。在某些时候，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>

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 = " ";
}

先感谢您！

标签： javascript

您可以将输出的显示样式设置display: none为例如在下面的 js 代码中。

我将js设置display: none为单击清除时，然后设置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 - 在 JavaScript 中单击按钮后删除输出

问题描述

解决方案

推荐阅读