如何在HTML文件中使用函数调用

huangapple go评论70阅读模式
英文:

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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;ISO-8859-1&quot;&gt;
&lt;title&gt;Welcome&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Product Information&lt;/h2&gt;
&lt;br&gt;

&lt;br&gt;
&lt;label for=&#39;Product&#39;&gt;Select the product to know discount&lt;/label&gt;
&lt;select id = &#39;Product&#39;&gt;
    &lt;option value=&quot;&quot;&gt;--Choose a product--&lt;/option&gt;
    &lt;option value= &quot;gold&quot;&gt;Gold&lt;/option&gt;
    &lt;option value= &quot;diamond&quot;&gt;Diamond&lt;/option&gt;
    &lt;option value= &quot;silver&quot;&gt;Silver&lt;/option&gt;
    &lt;option value= &quot;bronze&quot;&gt;Bronze&lt;/option&gt;
&lt;/select&gt;
&lt;br&gt;
&lt;p&gt;&lt;/p&gt;
&lt;script&gt;
constant select = document.querySelector(&#39;select&#39;);
constant para = document.querySelector(&#39;p&#39;);
select.onchange=setDiscount;

function setDiscount() {
constant choice = select.value;

if (choice === &#39;Gold&#39;) {
	para.textContent = &#39;Discount is 25&#39;;
} 
else if (choice === &#39;Diamond&#39;) {
	para.textContent = &#39;Discount is 15&#39;;
} 
else if (choice === &#39;Silver&#39;) {
	para.textContent = &#39;Discount is 10&#39;;
} 
else if (choice === &#39;Bronze&#39;) {
	para.textContent = &#39;Discount is 5&#39;;
} 
else {
	para.textContent = &#39;&#39;;
}
}
setDiscount();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 0

  1. 它是const而不是constant
  2. 您将值设置为小写的 "gold"、"diamond" 等,但在比较时使用大写字母 "Golds"。

此外,您已经为选择器设置了一个ID,可以使用document.getElementById。同样的事情也适用于段落,您可以为其添加一个ID。

英文:

Two things:

  1. Its constinstead of constant
  2. 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.

huangapple
  • 本文由 发表于 2020年1月7日 00:38:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/59615792.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定