How do I use javascript functions in html?

Question

I have been trying to use a function in a javascript file inside another html file. Essentially, it's not working and I think it has to do with my trying to make the javascript accessible on the html file. The function is supposed to add the values taken from the form and then output that sum. The first bit of code is my .js file and the second is my 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>

Ps Some extra questions. I had borrowed some of the code from a website because I am still quite new to both javascript and html. Why does the reset function have the array values all turned to 100? And, why doesn't the calculate function just call the reset function instead of doing the same thing?

Answer 1

I'm only a newbie to jscript and this may not work but can give this a go

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()">

How do I use javascript functions in html?

Question

1 answers

solution1
0 2018-02-16 13:58:08

How do I use javascript functions in html?

Question

1 answers

solution1 0 2018-02-16 13:58:08

solution1
0 2018-02-16 13:58:08