javaScript 函式入门 getElementById

javaScrip

任务:写一个函式名为calculator,具有自动计算汉堡总价与可乐总价
假设再函式内设计汉堡单价50,可乐单价20元
先简单假设有个view html ,利用 id="hamNumId" 串接值到javaScript的函式。
使用者可以简单写下买的汉堡与可乐数量,会自动算出总价 显示再html的console

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="voiewport" content="width = device-width,initial-scale=1.0">        <meta http-equiv = "X-UA-Compatible" content="ie = edge">        <title>Document</title>        <link rel="stylesheet" href = "style.css">            </head>    <body>        <div class="wrap">            <div class="wrap-inner">                <h1> calculator for restrument</h1>                <p> 请问客人您要点甚么餐?</p>                <p> 顾客:给我<input type="text" id="hamNumId">个汉堡,再给我<input type="text" id="cokeNumId">杯可乐</p>                <p>服务生:<input type="button" Id="countId" value="计算中按钮">,好的,总计是<input type="text" id="totalId">元</p>            </div>        </div>    
//.onclick 触发事件的监听按钮元件// function() 是一个没有参数的函式var humPrice=50;var cokePrice=20;document.getElementById('countId').onclick = function(){    alert('you already click the button!');    var hamNum = parseInt(document.getElementById('hamNumId').value)*humPrice;    var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice;    var totalprice= hamNum + cokeNum;    //最后最重要的totalId串接到前端显示画面的总金额    document.getElementById('totalId').textContent=totalprice;    console.log(totalprice);}


.value 是一个方法,可以把前端输入的数字显示成字串。

JavaScript有个冷知识,String之间可以数字相乘,会计算正确;但是数字相加则无法正确计算出数值,会变成首尾相连。例如:

String 状态的 '5'+'2'='52'String 状态的 '5'*'2' = '10'

因此要使用parseInt方法

a = parseInt('5'+'2')=10

本文经六角学院同意授权之笔记文章
https://courses.hexschool.com/
https://courses.hexschool.com/courses/js/lectures/11952161


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章