英文:
How to use function calling in html file
问题
我正在尝试创建一个HTML页面，该页面将从用户输入中获取产品类型，并根据HTML文件中描述的函数来打印折扣。以下是代码片段。我对HTML和JavaScript编程还不熟悉。但是代码根本没有打印出折扣。请建议如何解决。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome</title>
</head>
<body>
<h2>Product Information</h2>
<br>
<br>
<label for='Product'>Select the product to know discount</label>
<select id='Product'>
<option value="">--选择产品--</option>
<option value= "gold">黄金</option>
<option value= "diamond">钻石</option>
<option value= "silver">白银</option>
<option value= "bronze">青铜</option>
</select>
<br>
<p></p>
<script>
const select = document.querySelector('select');
const para = document.querySelector('p');
select.onchange = setDiscount;
function setDiscount() {
const choice = select.value;
if (choice === 'gold') {
para.textContent = '折扣为 25';
}
else if (choice === 'diamond') {
para.textContent = '折扣为 15';
}
else if (choice === 'silver') {
para.textContent = '折扣为 10';
}
else if (choice === 'bronze') {
para.textContent = '折扣为 5';
}
else {
para.textContent = '';
}
}
setDiscount();
</script>
</body>
</html>
请注意，我已将产品类型的选项从英文翻译为中文，并将折扣信息的语句也进行了相应的翻译。
英文:
I am trying to create a html page which will take the input from the user on the product type and print the discount on the basis of the function described in the html file. Here is the snippet of the code below. I am new to the html and java script coding. But the code is not printing the discount at all. Please suggest the way of doing it.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Welcome</title>
</head>
<body>
<h2>Product Information</h2>
<br>
<br>
<label for='Product'>Select the product to know discount</label>
<select id = 'Product'>
<option value="">--Choose a product--</option>
<option value= "gold">Gold</option>
<option value= "diamond">Diamond</option>
<option value= "silver">Silver</option>
<option value= "bronze">Bronze</option>
</select>
<br>
<p></p>
<script>
constant select = document.querySelector('select');
constant para = document.querySelector('p');
select.onchange=setDiscount;
function setDiscount() {
constant choice = select.value;
if (choice === 'Gold') {
para.textContent = 'Discount is 25';
}
else if (choice === 'Diamond') {
para.textContent = 'Discount is 15';
}
else if (choice === 'Silver') {
para.textContent = 'Discount is 10';
}
else if (choice === 'Bronze') {
para.textContent = 'Discount is 5';
}
else {
para.textContent = '';
}
}
setDiscount();
</script>
</body>
</html>
答案1
得分: 0
- 它是
const而不是constant。 - 您将值设置为小写的 "gold"、"diamond" 等，但在比较时使用大写字母 "Golds"。
此外，您已经为选择器设置了一个ID，可以使用document.getElementById。同样的事情也适用于段落，您可以为其添加一个ID。
英文:
Two things:
- Its
constinstead ofconstant - You set the values as lower case "gold", "diamond", etc, but when you compare you use capital letters "Golds"
Besides that, you already have an id for select, you can use document.getElementById. The same thing for the paragraph, you can add an id to it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论