HTML 和 JavaScript，javascript 没有输出，我不知道为什么？

Question

总的来说 HTML5 的新手，如果这是一个简单的修复程序，我们深表歉意:)

我有这个 HTML 文件，它需要 4 个用户输入（整数）并将它们乘以 4 个其他变量，然后将新变量相加并将其输出到 HTML

通过 document.getElementById("out").innerHTML 当我运行在 chrome 中的 HTML 它什么都不做，我不知道为什么，Adobe Dreamweaver 根本没有标记任何错误，据我所知，它运行在浏览器中很好。如果你确实修复了它，请尝试解释你在做什么以及它为什么有效，并尽量让我的代码保持原样，这样我仍然可以理解它（希望这是有意义的？）

这是我的完整代码-

<!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>

再次抱歉，如果这是一个愚蠢的问题（如果存在这样的问题），但我已经花了好几个小时解决这个问题了:(

Answer 1

这应该可以正常工作。您试图从表单中获取值，但您试图从不存在的变量中获取它们。

<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

您需要将 x 更改为 files:

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

您从未定义 x，因此 x 未定义。但是，您确实定义了 files ，这是您想要使用的。您试图访问 form 的元素，您将 form 存储在 files 变量中而不是 x.

Answer 3

您需要修改函数（将'x'替换为'files'）：

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

如何解决此类错误：

为了解决这个问题，我在 Firefox 中按了 F12（在 Chrome 中也有效）以调出控制台。它显示了一个名为 'x' 的未定义变量，并告诉我应该更改它的行。

HTML 和 JavaScript，javascript 没有输出，我不知道为什么？

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

html

javascript

innerhtml

getelementbyid