iT邦幫忙

0

HTML+JAVASCRIPT累加問題!!!!

html html5 javascript
小哈 2016-10-04 18:39:29 ‧ 4441 瀏覽

  • 分享至 

  • xImage

各位大大
小弟最近接了一個小型專案,有一些html結合javascript的問題提問~
要寫一個統計分數系統!!!
CODE累加一定都沒問題,不過要在分數1或分數2或分數3修改下拉式分數時,總分的地方
他不會按照分數去做加減,只會一直往上加...
是否麻煩各位大大給我一點指教...

以下是我的程式碼!!!

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function sum(value)
{

document.getElementById("total").value=parseInt(document.getElementById("total").value)+ parseInt(value);
}
</SCRIPT>

分數1<select name="o_dollar1" type="text" id="o_dollar1" onchange="sum(this.value)" list="words1" style="width:60px;height:30px" align='center' />
<datalist id="words1">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
		</select>
</datalist>
分數2<select name="o_dollar2" type="text" id="o_dollar2" onchange="sum(this.value)" list="words2"selected="true" style="width:60px;height:30px" align='center'  />
<datalist id="words2">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	</select>
</datalist>
分數3<select name="o_dollar3" type="text" id="o_dollar3" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words3">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	</select>
</datalist>

總分<input name="o_total" type="text" id="total" value="0" readonly="readonly" style="width:60px;height:30px" align='center' />
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
海綿寶寶
iT邦大神 1 級 ‧ 2016-10-04 20:00:48
最佳解答

我的做法是...改 sum 的寫法如下

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function sum(value) {
document.getElementById("total").value=
parseInt(document.getElementById("o_dollar1").value) + parseInt(document.getElementById("o_dollar2").value) + parseInt(document.getElementById("o_dollar3").value);
}
</SCRIPT>

分數1<select name="o_dollar1" type="text" id="o_dollar1" onchange="sum(this.value)" list="words1" style="width:60px;height:30px" align='center' />
<datalist id="words1">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
		</select>
</datalist>
分數2<select name="o_dollar2" type="text" id="o_dollar2" onchange="sum(this.value)" list="words2"selected="true" style="width:60px;height:30px" align='center'  />
<datalist id="words2">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	</select>
</datalist>
分數3<select name="o_dollar3" type="text" id="o_dollar3" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words3">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	</select>
</datalist>

總分<input name="o_total" type="text" id="total" value="0" readonly="readonly" style="width:60px;height:30px" align='center' />
看更多先前的回應...收起先前的回應...
小哈 iT邦新手 4 級 ‧ 2016-10-05 11:34:27 檢舉

感謝海綿大大的回覆...實在感謝...
只是還有一個問題...
如果我要再帶一個核定等第欄位,欄位下拉式有核定A+(90-100)分 A(80-89)分 A-(70-79)分 B(69分以下)這個欄位,可以依照總分帶出來的分數,自動判斷核定等第帶哪個分數層級嗎...
麻煩大大...

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function sum(value) {
document.getElementById("total").value=
parseInt(document.getElementById("o_dollar1").value) + parseInt(document.getElementById("o_dollar2").value) + parseInt(document.getElementById("o_dollar3").value)+
parseInt(document.getElementById("o_dollar4").value);
}
</SCRIPT>

分數20<select name="o_dollar1" type="text" id="o_dollar1" onchange="sum(this.value)" list="words1" style="width:60px;height:30px" align='center' />
<datalist id="words1">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
		</select>
</datalist>
分數50<select name="o_dollar2" type="text" id="o_dollar2" onchange="sum(this.value)" list="words2"selected="true" style="width:60px;height:30px" align='center'  />
<datalist id="words2">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
	<option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
	<option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
	<option value="31">31</option>
	<option value="32">32</option>
	<option value="33">33</option>
	<option value="34">34</option>
	<option value="35">35</option>
	<option value="36">36</option>
	<option value="37">37</option>
	<option value="38">38</option>
	<option value="39">39</option>
	<option value="40">40</option>
	<option value="41">41</option>
	<option value="42">42</option>
	<option value="43">43</option>
	<option value="44">44</option>
	<option value="45">45</option>
	<option value="46">46</option>
	<option value="47">47</option>
	<option value="48">48</option>
	<option value="49">49</option>
	<option value="50">50</option>
	</select>
</datalist>
分數20<select name="o_dollar3" type="text" id="o_dollar3" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words3">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
	</select>
</datalist>
分數10<select name="o_dollar4" type="text" id="o_dollar4" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words4">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
	</select>
</datalist>

總分100分<input name="o_total" type="text" id="total" value="0" readonly="readonly" style="width:60px;height:30px" align='center' />
<BR></BR>
<table border=3 align=center width=80% bgcolor cellspacing=5 cellpadding=6>
<tr><td rowspan="2" style="width:870px;height:45px"><B>說明:1.個人績效分類:A+(90-100分);A(80-89分);A-(70-79分);B(69分以下)。</BR></B></td>
<td style="width:141px;height:40px" align='center'BGColor=YELLOW><B>核定等第</B></td></tr>
<!--<tr><td style="width:141px;height:40px"align='center'><input type="text" placeholder="請填入等第" style="width:141px;height:50px"></td></tr>原程式註解--> 
<tr><td style="width:141px;height:40px"align='center'>
<select name="o_dollar2" type="text" id="class" style="width:141px;height:40px;font-size:18px;" align='center'>
<datalist>
    <option value="0" selected="selected" align='center'>請選擇等第</option>
    <option style="color:#FF0000" value="A+">A+(90-100分)</option>
    <option style="color:#4169E1" value="A">A(80-89分)</option>
    <option style="color:#FFA500" value="A-">A-(70-79分)</option>
    <option style="color:#FFD700" value="B">B(69分以下)</option>
	</select>
</datalist></td></tr>
</table>
海綿寶寶 iT邦大神 1 級 ‧ 2016-10-05 13:51:56 檢舉

可以

小哈 iT邦新手 4 級 ‧ 2016-10-05 15:19:31 檢舉

Dear海綿大大...
這個專案蠻緊急的...自己也TRY好多次...
是否能教學一下...試了一個早上和下午...
可以麻煩海綿大大嗎...第一次接觸會好好學習...
/images/emoticon/emoticon46.gif

海綿寶寶 iT邦大神 1 級 ‧ 2016-10-05 15:54:01 檢舉

事不過三

<SCRIPT TYPE="TEXT/JAVASCRIPT">
function sum(value) {
document.getElementById("total").value=
parseInt(document.getElementById("o_dollar1").value) + parseInt(document.getElementById("o_dollar2").value) + parseInt(document.getElementById("o_dollar3").value)+
parseInt(document.getElementById("o_dollar4").value);

var total_score = document.getElementById("total").value;
if (total_score > 89) {
   document.getElementById("o_grade").selectedIndex = 1;
}
else if (total_score > 79) {
   document.getElementById("o_grade").selectedIndex = 2;
}
else if (total_score > 69) {
   document.getElementById("o_grade").selectedIndex = 3;
}
else {
   document.getElementById("o_grade").selectedIndex = 4;
}
}
</SCRIPT>

分數20<select name="o_dollar1" type="text" id="o_dollar1" onchange="sum(this.value)" list="words1" style="width:60px;height:30px" align='center' />
<datalist id="words1">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
		</select>
</datalist>
分數50<select name="o_dollar2" type="text" id="o_dollar2" onchange="sum(this.value)" list="words2"selected="true" style="width:60px;height:30px" align='center'  />
<datalist id="words2">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
	<option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
	<option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
	<option value="31">31</option>
	<option value="32">32</option>
	<option value="33">33</option>
	<option value="34">34</option>
	<option value="35">35</option>
	<option value="36">36</option>
	<option value="37">37</option>
	<option value="38">38</option>
	<option value="39">39</option>
	<option value="40">40</option>
	<option value="41">41</option>
	<option value="42">42</option>
	<option value="43">43</option>
	<option value="44">44</option>
	<option value="45">45</option>
	<option value="46">46</option>
	<option value="47">47</option>
	<option value="48">48</option>
	<option value="49">49</option>
	<option value="50">50</option>
	</select>
</datalist>
分數20<select name="o_dollar3" type="text" id="o_dollar3" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words3">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
	<option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
	</select>
</datalist>
分數10<select name="o_dollar4" type="text" id="o_dollar4" onchange="sum(this.value)" list="words3"selected="true" style="width:60px;height:30px" align='center' />
<datalist id="words4">
    <option value="0" selected="selected"></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
	<option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
	</select>
</datalist>

總分100分<input name="o_total" type="text" id="total" value="0" readonly="readonly" style="width:60px;height:30px" align='center' />
<BR></BR>
<table border=3 align=center width=80% bgcolor cellspacing=5 cellpadding=6>
<tr><td rowspan="2" style="width:870px;height:45px"><B>說明:1.個人績效分類:A+(90-100分);A(80-89分);A-(70-79分);B(69分以下)。</BR></B></td>
<td style="width:141px;height:40px" align='center'BGColor=YELLOW><B>核定等第</B></td></tr>
<!--<tr><td style="width:141px;height:40px"align='center'><input type="text" placeholder="請填入等第" style="width:141px;height:50px"></td></tr>原程式註解--> 
<tr><td style="width:141px;height:40px"align='center'>
<select name="o_grade" type="text" id="o_grade" style="width:141px;height:40px;font-size:18px;" align='center'>
<datalist>
    <option value="0" selected="selected" align='center'>請選擇等第</option>
    <option style="color:#FF0000" value="A+">A+(90-100分)</option>
    <option style="color:#4169E1" value="A">A(80-89分)</option>
    <option style="color:#FFA500" value="A-">A-(70-79分)</option>
    <option style="color:#FFD700" value="B">B(69分以下)</option>
	</select>
</datalist></td></tr>
</table>
小哈 iT邦新手 4 級 ‧ 2016-10-05 16:53:44 檢舉

感謝海綿大大...該買本JAVASCRIPT書來看...

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙