如何在html中使用javascript函数?

时间:2018-02-16 10:20:00

标签: javascript html function

我一直在尝试在另一个html文件中的javascript文件中使用一个函数。从本质上讲,它不起作用,我认为这与我尝试在html文件上访问javascript有关。该函数应该添加从表单中获取的值,然后输出该总和。代码的第一位是我的.js文件,第二位是我的html。

function reset()
{
	var q = new Array(5);
	
	for(var i = 0; i < 5; i++)
	{
		q[i] = 100;
	}
}

function calculate(form)
{
	var q = new Array(5);
	for(var i = 0; i < 5; i++) {
		q[i] = 100;
	}
	q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
	q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
	q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
	q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
	q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
	
	var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
	
	document.worksheet1.totals.value = total;
}
<html>

<header>
	<script language="Javascript" src="tmdcalculation.js" type="text/javascript"></script>
</header>

<body>
	<form name="worksheet1" id="worksheet1" onsubmit="calculate">
	<table border="1" align="center">
		<tr>
			<td><table>
				<tr>
					<td>Feeling</td>
					<td>How I have felt</td>
				</tr>
				<tr>
					<td>Question 1?</td>
					<td><select name="Q1" size="1">
						<option value="0" selected="selected">Not at all</option>
						<option value="1">A Little</option>
						<option value="2">Moderately</option>
						<option value="3">Quite a Bit</option>
						<option value="4">Extremely</option>
					</select></td>
				</tr>
				<tr>
					<td>Question 2?</td>
					<td><select name="Q2" size="1">
						<option value="0" selected="selected">Not at all</option>
						<option value="1">A Little</option>
						<option value="2">Moderately</option>
						<option value="3">Quite a Bit</option>
						<option value="4">Extremely</option>
					</select></td>
				</tr>
				<tr>
					<td>Question 3?</td>
					<td><select name="Q3" size="1">
						<option value="0" selected="selected">Not at all</option>
						<option value="1">A Little</option>
						<option value="2">Moderately</option>
						<option value="3">Quite a Bit</option>
						<option value="4">Extremely</option>
					</select></td>
				</tr>
				<tr>
					<td>Question 4?</td>
					<td><select name="Q4" size="1">
						<option value="0" selected="selected">Not at all</option>
						<option value="1">A Little</option>
						<option value="2">Moderately</option>
						<option value="3">Quite a Bit</option>
						<option value="4">Extremely</option>
					</select></td>
				</tr>
				<tr>
					<td>Question 5?</td>
					<td><select name="Q5" size="1">
						<option value="0" selected="selected">Not at all</option>
						<option value="1">A Little</option>
						<option value="2">Moderately</option>
						<option value="3">Quite a Bit</option>
						<option value="4">Extremely</option>
					</select></td>
				</tr>
			</table></td>
		</tr>
	</table>
	
	<table border="1" align="center">
		<tr>
			<td><table>
				<tr>
					<td align="right"><input name="button" type="button" onclick="calculate(this.form)" value="Analyse" /></td>
					<td>Total Mood Calc: 
					<input name="totals" type="text" size="3" /></td>
					<td><input name="reset" type="reset" onclick="initial()" value="Reset" /></td>
				</tr>
			</table></td>
		</tr>
	</table>

	</form>
</body>

</html>

P.s一些额外的问题。我从网站上借了一些代码,因为我对javascript和html都很新。为什么重置功能的数组值都变为100?并且,为什么计算函数不会调用重置函数而不是执行相同的操作?

1 个答案:

答案 0 :(得分:0)

我只是jscript的新手,这可能不起作用,但可以放手一搏

function reset()
{
    var q = new Array(5);

    for(var i = 0; i < 5; i++)
    {
        q[i] = 100;
    }
}

function calculate() {

    var q = new Array(5);
    for(var i = 0; i < 5; i++) {
        q[i] = 100;
    }
    q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
    q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
    q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
    q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
    q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;

    var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);

    document.worksheet1.totals.value = total;
}

<form name="worksheet1" id="worksheet1" onsubmit="return calculate()">