gpt4 book ai didi

javascript - 如何在 JavaScript 中清除 .appendChild

转载 作者:行者123 更新时间:2023-11-30 19:20:41 26 4
gpt4 key购买 nike

我创建了一个小费计算器。在你输入金额并点击回车后,会弹出文本告诉你如果你支付 20%,你欠多少钱。我想出了如何清除 <input> 中的数字但我无法弄清楚 JS,以便文本也清除。

这是我的文件的链接。

https://codepen.io/wrraybin/pen/WVdvLN

<!DOCTYPE html>

<html>
<head>
<title>Tip Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<link rel="stylesheet" href='tip-calc.css'>
</head>

<body>
<div>
<h1>Tip Calculator</h1>
<form id='tip-calc'>
<input id='enter-num' type='number' placeholder='Bill Total' name='tipTotal' >
<div id='buttons'>
<button id='butt-one'>Tip</button>
<input id='butt-two' type="reset" value="Reset" name='resetButton'>
</div>
</form>
</div>
<div id='final-amount'>

</div>
</body>
<script src="tip-calc.js"></script>
</html>

document.querySelector('#tip-calc').addEventListener('submit', function(e){
e.preventDefault()
document.querySelector('#final-amount').innerHTML = ''
const billTotal = document.createElement('h2')
const tip = Math.floor( e.target.elements.tipTotal.value * 0.2)
billTotal.textContent = `You should leave $${tip} if tipping 20%.`
document.querySelector('#final-amount').appendChild(billTotal)
})

最佳答案

将此代码添加到文件 tip-calc.js

document.querySelector('#butt-two').onclick =  
() => document.querySelector('#final-amount').innerHTML = '';

document.querySelector('#tip-calc').addEventListener('submit', function(e) {
e.preventDefault()
document.querySelector('#final-amount').innerHTML = ''
const billTotal = document.createElement('h2')
const tip = Math.floor(e.target.elements.tipTotal.value * 0.2)
billTotal.textContent = `You should leave $${tip} if tipping 20%.`
document.querySelector('#final-amount').appendChild(billTotal)
})

document.querySelector('#butt-two').onclick =
() => document.querySelector('#final-amount').innerHTML = '';
<div>
<h1>Tip Calculator</h1>
<form id='tip-calc'>
<input id='enter-num' type='number' placeholder='Bill Total' name='tipTotal'>
<div id='buttons'>
<button id='butt-one'>Tip</button>
<input id='butt-two' type="reset" value="Reset" name='resetButton'>
</div>
</form>
</div>
<div id='final-amount'>

</div>

关于javascript - 如何在 JavaScript 中清除 .appendChild,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57514020/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com