想从 getshare() 函数中获取 return 值，但它没有 returning 任何东西。有没有其他方法？
Want to return value from getshare() function but it is not returning anything. Is there any alternative approach?
const btns = document.querySelector(".col");
const share = Array.from(btns.children);
console.log(share)
let share_percentage = getshare();
function getshare(){
let share_value;
share.forEach(btn=>{
btn.addEventListener("click",function(){
share.forEach((btn)=>{
btn.classList.remove("active");
})
if(btn.id!="input-share"){
let btn_value = btn.innerHTML.replace("%","");
btn.classList.toggle("active");
share_value = btn_value;
}
else{
btn_value = getinputshare();
btn.addEventListener("click",function(){
btn.classList.toggle("active-input");
share_value = btn_value;
})
}
return share_value;
})
})
}
function getinputshare(){
return document.getElementById("input-share").value;
}
function getbill(){
let bill_value = document.getElementById("bill").value;
return bill_value;
}
function getpeople(){
let people_value = document.getElementById("people").value;
return people_value;
}
function tipcalculate(){
let a = getbill();
console.log(a);
let b = share_percentage;
console.log(b);
let c = getpeople();
console.log(c);
let tip_amount = (a*b)/(100*c);
console.log(tip_amount)
}
const reset = document.getElementById("reset");
reset.addEventListener("click",function(){
tipcalculate();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tip Spiltter</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/124816636a.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>SPLI <br>TTER</h1>
<div class="main">
<div class="container-section">
<div class="container">
<h4>Bill</h4>
<input type="number" placeholder="0" id="bill" onblur="getbill()">
<span>$</span>
</div>
<div class="container" id="middle-container">
<h4>Select Tip %</h4>
<div class="row">
<div class="col">
<button>5%</button>
<button>10%</button>
<button>15%</button>
<button>25%</button>
<button>50%</button>
<input type="number" placeholder="Custom" id="input-share" onblur="getinputshare()">
</div>
</div>
</div>
<div class="container">
<h4>Number of People</h4>
<input type="number" placeholder="0" id="people" onblur="getpeople()">
<span id="person"><img src="images/icon-person.svg" alt=""></span>
</div>
</div>
<div class="calculator">
<h4>Tip Amount</h4>
<div class="result">
<span>/ person</span>
<h1>[=12=].00</h1>
</div>
<h4>Total</h4>
<div class="result">
<span>/ person</span>
<h1>[=12=].00</h1>
</div>
<button id="reset">RESET</button>
</div>
</div>
</body>
</html>
要计算小费，我需要三个值：bill_value、share_value、people_value。
我面临的唯一问题是 share_value。在 tipcalculate() 函数中
未读取其值并给出未定义的值。我用谷歌搜索并发现了那个值
不能从 foreach 返回，所以有没有其他方法可以执行
同样的操作，也得到share_value。
const btns = document.querySelector(".col");
const share = Array.from(btns.children);
console.log(share)
let share_percentage = getshare();
function getshare(){
let share_value;
share.forEach(btn=>{
btn.addEventListener("click",function(){
share.forEach((btn)=>{
btn.classList.remove("active");
})
if(btn.id!="input-share"){
let btn_value = btn.innerHTML.replace("%","");
btn.classList.toggle("active");
share_value = btn_value;
}
else{
btn_value = getinputshare();
btn.addEventListener("click",function(){
btn.classList.toggle("active-input");
share_value = btn_value;
})
}
return share_value;
})
})
}
function getinputshare(){
return document.getElementById("input-share").value;
}
function getbill(){
let bill_value = document.getElementById("bill").value;
return bill_value;
}
function getpeople(){
let people_value = document.getElementById("people").value;
return people_value;
}
function tipcalculate(){
let a = getbill();
console.log(a);
let b = share_percentage;
console.log(b);
let c = getpeople();
console.log(c);
let tip_amount = (a*b)/(100*c);
console.log(tip_amount)
}
const reset = document.getElementById("reset");
reset.addEventListener("click",function(){
tipcalculate();
})
另一种方法是给你的按钮一个 class 和值：
<div class="col">
<button value="5" class="percent-btn">5%</button>
<button value="10" class="percent-btn">10%</button>
<button value="15" class="percent-btn">15%</button>
<button value="25" class="percent-btn">25%</button>
<button value="50" class="percent-btn">50%</button>
<input type="number" placeholder="Custom" id="input-share" />
</div>
然后给整个添加一个事件监听器div。当点击事件目标是按钮时，将其值保存到 share_percentage 变量：
let share_percentage
...
const per = document.querySelector('.col')
per.addEventListener('click', e => {
if (e.target.tagName == 'BUTTON') {
percentBtns.forEach(b => b.classList.remove('active'))
e.target.classList.add('active')
share_percentage = e.target.value
customPercent.value = '' // clear the custom percent value
}
})
并为自定义小费百分比输入添加一个 change 事件侦听器。在这里，我将其值保存到 share_percentage 并从其他百分比按钮中删除 active class。
const customPercent = document.getElementById('input-share')
customPercent.addEventListener('change', () => {
percentBtns.forEach(b => b.classList.remove('active'))
share_percentage = customPercent.value
// do more stuff
})
这是一个包含相关部分的工作示例：
const percentBtns = [...document.querySelectorAll('.percent-btn')]
let share_percentage
const per = document.querySelector('.col')
per.addEventListener('click', e => {
if (e.target.tagName == 'BUTTON') {
percentBtns.forEach(b => b.classList.remove('active'))
e.target.classList.add('active')
share_percentage = e.target.value
customPercent.value = ''
}
})
const customPercent = document.getElementById('input-share')
customPercent.addEventListener('change', () => {
percentBtns.forEach(b => b.classList.remove('active'))
share_percentage = customPercent.value
// do more stuff
})
function getbill() {
return document.getElementById('bill').value
}
function getpeople() {
return document.getElementById('people').value
}
function tipcalculate() {
let a = getbill()
console.log('getbill() = ', a)
let b = share_percentage
console.log('share_percentage = ', b)
let c = getpeople()
console.log('getpeople() = ', c)
let tip_amount = (a * b) / (100 * c)
console.log('tip_amount = ', tip_amount)
return tip_amount
}
const reset = document.getElementById('reset')
reset.addEventListener('click', function() {
console.clear()
tipcalculate()
})
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 10px 7px 10px;
padding: 0 4px;
}
.active {
background-color: red;
}
<div class="box">
<h5>Bill</h5>
<input type="number" placeholder="0" id="bill" onblur="getbill()" />
<span>$</span>
</div>
<div class="box">
<h5>Select Tip %</h5>
<div class="col">
<button value="5" class="percent-btn">5%</button>
<button value="10" class="percent-btn">10%</button>
<button value="15" class="percent-btn">15%</button>
<button value="25" class="percent-btn">25%</button>
<button value="50" class="percent-btn">50%</button>
<input type="number" placeholder="Custom" id="input-share" />
</div>
</div>
<div class="box">
<h5>Number of People</h5>
<input type="number" placeholder="0" id="people" />
<button id="reset">Calculate Tip</button>
</div>
const btns = document.querySelector(".col");
const share = Array.from(btns.children);
console.log(share)
let share_percentage = getshare();
function getshare(){
let share_value;
share.forEach(btn=>{
btn.addEventListener("click",function(){
share.forEach((btn)=>{
btn.classList.remove("active");
})
if(btn.id!="input-share"){
let btn_value = btn.innerHTML.replace("%","");
btn.classList.toggle("active");
share_value = btn_value;
}
else{
btn_value = getinputshare();
btn.addEventListener("click",function(){
btn.classList.toggle("active-input");
share_value = btn_value;
})
}
return share_value;
})
})
}
function getinputshare(){
return document.getElementById("input-share").value;
}
function getbill(){
let bill_value = document.getElementById("bill").value;
return bill_value;
}
function getpeople(){
let people_value = document.getElementById("people").value;
return people_value;
}
function tipcalculate(){
let a = getbill();
console.log(a);
let b = share_percentage;
console.log(b);
let c = getpeople();
console.log(c);
let tip_amount = (a*b)/(100*c);
console.log(tip_amount)
}
const reset = document.getElementById("reset");
reset.addEventListener("click",function(){
tipcalculate();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tip Spiltter</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/124816636a.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>SPLI <br>TTER</h1>
<div class="main">
<div class="container-section">
<div class="container">
<h4>Bill</h4>
<input type="number" placeholder="0" id="bill" onblur="getbill()">
<span>$</span>
</div>
<div class="container" id="middle-container">
<h4>Select Tip %</h4>
<div class="row">
<div class="col">
<button>5%</button>
<button>10%</button>
<button>15%</button>
<button>25%</button>
<button>50%</button>
<input type="number" placeholder="Custom" id="input-share" onblur="getinputshare()">
</div>
</div>
</div>
<div class="container">
<h4>Number of People</h4>
<input type="number" placeholder="0" id="people" onblur="getpeople()">
<span id="person"><img src="images/icon-person.svg" alt=""></span>
</div>
</div>
<div class="calculator">
<h4>Tip Amount</h4>
<div class="result">
<span>/ person</span>
<h1>[=12=].00</h1>
</div>
<h4>Total</h4>
<div class="result">
<span>/ person</span>
<h1>[=12=].00</h1>
</div>
<button id="reset">RESET</button>
</div>
</div>
</body>
</html>
要计算小费，我需要三个值：bill_value、share_value、people_value。 我面临的唯一问题是 share_value。在 tipcalculate() 函数中 未读取其值并给出未定义的值。我用谷歌搜索并发现了那个值 不能从 foreach 返回，所以有没有其他方法可以执行 同样的操作，也得到share_value。
const btns = document.querySelector(".col");
const share = Array.from(btns.children);
console.log(share)
let share_percentage = getshare();
function getshare(){
let share_value;
share.forEach(btn=>{
btn.addEventListener("click",function(){
share.forEach((btn)=>{
btn.classList.remove("active");
})
if(btn.id!="input-share"){
let btn_value = btn.innerHTML.replace("%","");
btn.classList.toggle("active");
share_value = btn_value;
}
else{
btn_value = getinputshare();
btn.addEventListener("click",function(){
btn.classList.toggle("active-input");
share_value = btn_value;
})
}
return share_value;
})
})
}
function getinputshare(){
return document.getElementById("input-share").value;
}
function getbill(){
let bill_value = document.getElementById("bill").value;
return bill_value;
}
function getpeople(){
let people_value = document.getElementById("people").value;
return people_value;
}
function tipcalculate(){
let a = getbill();
console.log(a);
let b = share_percentage;
console.log(b);
let c = getpeople();
console.log(c);
let tip_amount = (a*b)/(100*c);
console.log(tip_amount)
}
const reset = document.getElementById("reset");
reset.addEventListener("click",function(){
tipcalculate();
})
另一种方法是给你的按钮一个 class 和值：
<div class="col">
<button value="5" class="percent-btn">5%</button>
<button value="10" class="percent-btn">10%</button>
<button value="15" class="percent-btn">15%</button>
<button value="25" class="percent-btn">25%</button>
<button value="50" class="percent-btn">50%</button>
<input type="number" placeholder="Custom" id="input-share" />
</div>
然后给整个添加一个事件监听器div。当点击事件目标是按钮时，将其值保存到 share_percentage 变量：
let share_percentage
...
const per = document.querySelector('.col')
per.addEventListener('click', e => {
if (e.target.tagName == 'BUTTON') {
percentBtns.forEach(b => b.classList.remove('active'))
e.target.classList.add('active')
share_percentage = e.target.value
customPercent.value = '' // clear the custom percent value
}
})
并为自定义小费百分比输入添加一个 change 事件侦听器。在这里，我将其值保存到 share_percentage 并从其他百分比按钮中删除 active class。
const customPercent = document.getElementById('input-share')
customPercent.addEventListener('change', () => {
percentBtns.forEach(b => b.classList.remove('active'))
share_percentage = customPercent.value
// do more stuff
})
这是一个包含相关部分的工作示例：
const percentBtns = [...document.querySelectorAll('.percent-btn')]
let share_percentage
const per = document.querySelector('.col')
per.addEventListener('click', e => {
if (e.target.tagName == 'BUTTON') {
percentBtns.forEach(b => b.classList.remove('active'))
e.target.classList.add('active')
share_percentage = e.target.value
customPercent.value = ''
}
})
const customPercent = document.getElementById('input-share')
customPercent.addEventListener('change', () => {
percentBtns.forEach(b => b.classList.remove('active'))
share_percentage = customPercent.value
// do more stuff
})
function getbill() {
return document.getElementById('bill').value
}
function getpeople() {
return document.getElementById('people').value
}
function tipcalculate() {
let a = getbill()
console.log('getbill() = ', a)
let b = share_percentage
console.log('share_percentage = ', b)
let c = getpeople()
console.log('getpeople() = ', c)
let tip_amount = (a * b) / (100 * c)
console.log('tip_amount = ', tip_amount)
return tip_amount
}
const reset = document.getElementById('reset')
reset.addEventListener('click', function() {
console.clear()
tipcalculate()
})
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 10px 7px 10px;
padding: 0 4px;
}
.active {
background-color: red;
}
<div class="box">
<h5>Bill</h5>
<input type="number" placeholder="0" id="bill" onblur="getbill()" />
<span>$</span>
</div>
<div class="box">
<h5>Select Tip %</h5>
<div class="col">
<button value="5" class="percent-btn">5%</button>
<button value="10" class="percent-btn">10%</button>
<button value="15" class="percent-btn">15%</button>
<button value="25" class="percent-btn">25%</button>
<button value="50" class="percent-btn">50%</button>
<input type="number" placeholder="Custom" id="input-share" />
</div>
</div>
<div class="box">
<h5>Number of People</h5>
<input type="number" placeholder="0" id="people" />
<button id="reset">Calculate Tip</button>
</div>