Question

new to HTML5 in general so sorry if this is an easy fix :)

I have this HTML file that takes 4 user inputs (integers) and times them by 4 other variables, then adds up the new variables and outputs it into a HTML

via document.getElementById("out").innerHTML When I run the HTML in chrome it does nothing at all, and I dont know why, Adobe Dreamweaver is not flagging up any errors at all and it runs fine in browser as far as I can tell. If you do fix it would you please try and explain what you are doing and why it works and try to keep my code in its form so I can still understand it (hopefully that made sense?)

Here is my code in its entirety-

<!doctype html>
<html>
<body>
<h1><font face="arial">How much space do you need?</font></h1>
<h2><font face="arial">Number of Files: </font></h2>

<form id="filenum">
<font face="arial"> Documents: <input type="int" name="doc" value="0"><br></font>
<font face="arial"> Photos: <input type="int" name="photo" value="0"><br></font>
<font face="arial"> Music: <input type="int" name="music" value="0"><br>     </font>
<font face="arial"> Films: <input type="int" name="film" value="0"><br></font>
</form>
<button onclick="outputsize()">Calculate</button>

<script>
var doc,photo,music,film,ttb,tgb,tmb,tdoc,tphoto,tmusic,tfilm,files,sdoc,sphoto,smusic,sfilm;

function outputsize() {
    sdoc=0.1
    sphoto=8
    smusic=5
    sfilm=1400
    files=document.getElementById("filenum");
    doc=x.elements["doc"].value;
    photo=x.elements["photo"].value;
    music=x.elements["music"].value;
    film=x.elements["film"].value;
    tdoc=doc*sdoc;
    tphoto=photo*sphoto;
    tmusic=music*smusic;
    tfilm=film*sfilm;
    tmb=tdoc + tphoto + tmusic + tfilm;
    tgb=tmb/1000;
    ttb=tgb/1000;
    document.getElementById("out").innerHTML="You need a, "+tmb+"MB or bigger hard drive.<br>";
    document.getElementById("out").innerHTML+="Or...<br>";
    document.getElementById("out").innerHTML+="You need a, "+tgb+"GB or bigger hard drive.<br>";
    document.getElementById("out").innerHTML+="Or...<br>";
    document.getElementById("out").innerHTML+="You need a, "+ttb+"TB or bigger hard drive.<br>";
}
</script>

<p id="out"><font face="arial">We calculated:</font></p>

</body>
</html>

Again, sorry if this is a stupid question (if such a thing exists) but I have been at this for hours and can't solve it :(

Answer 1

This should work correctly. You were trying to get values from the form, but you were trying to obtain them from a variable that did not exist.

<h1><font face="arial">How much space do you need?</font></h1>


<h2><font face="arial">Number of Files: </font></h2>

<form id="filenum">
<font face="arial"> Documents: <input type="int" name="doc" value="0"><br></font>

<font face="arial"> Photos: <input type="int" name="photo" value="0"><br></font>

<font face="arial"> Music: <input type="int" name="music" value="0"><br>     </font>

<font face="arial"> Films: <input type="int" name="film" value="0"><br></font>

</form>
<button onclick="outputsize()">Calculate</button>
<script>
    var doc, photo, music, film, ttb, tgb, tmb, tdoc, tphoto, tmusic, tfilm, files, sdoc, sphoto, smusic, sfilm;

    function outputsize() {
        sdoc = 0.1;
        sphoto = 8;
        smusic = 5;
        sfilm = 1400;
        files = document.getElementById("filenum");
        doc = files.elements["doc"].value;
        photo = files.elements["photo"].value;
        music = files.elements["music"].value;
        film = files.elements["film"].value;
        tdoc = doc * sdoc;
        tphoto = photo * sphoto;
        tmusic = music * smusic;
        tfilm = film * sfilm;
        tmb = tdoc + tphoto + tmusic + tfilm;
        tgb = tmb / 1000;
        ttb = tgb / 1000;
        document.getElementById("out").innerHTML = "You need a, " + tmb + "MB or bigger hard drive.<br>";
        document.getElementById("out").innerHTML += "Or...<br>";
        document.getElementById("out").innerHTML += "You need a, " + tgb + "GB or bigger hard drive.<br>";
        document.getElementById("out").innerHTML += "Or...<br>";
        document.getElementById("out").innerHTML += "You need a, " + ttb + "TB or bigger hard drive.<br>";
    }
</script>
<p id="out"><font face="arial">We calculated:</font>
</p>

Answer 2

You need to change x to files:

doc=files.elements["doc"].value;
photo=files.elements["photo"].value;
music=files.elements["music"].value;
film=files.elements["film"].value;

You never defined x so x was undefined. You did however define files which is what you want to use. You were trying to access elements of your form which you stored your form in the files variable not x.

Answer 3

You need to modify the function (replace 'x' with 'files'):

function outputsize() {
...
doc=files.elements["doc"].value;
photo=files.elements["photo"].value;
music=files.elements["music"].value;
film=files.elements["film"].value;
...
}

How to troubleshoot errors like these:

To figure this out, I pressed F12 in Firefox (also works in Chrome) to bring up the console. It showed an undefined variable called 'x' and told me the line where it should be changed.

HTML and JavaScript, no output from javascript, i don't know why?

3 个答案:

HTML and JavaScript, no output from javascript, i don&#39;t know why?

3 个答案:

HTML and JavaScript, no output from javascript, i don't know why?