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

【问题标题】：HTML and JavaScript, no output from javascript, i don't know why?HTML 和 JavaScript，javascript 没有输出，我不知道为什么？
【发布时间】：2015-07-31 19:51:12
【问题描述】：

HTML5 的新手，如果这是一个简单的解决方法，很抱歉 :)

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

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

再次，对不起，如果这是一个愚蠢的问题（如果存在这样的事情），但我已经解决了几个小时并且无法解决它:(

【问题讨论】：

你曾经调用过那个函数吗/
检查您的控制台。看起来 x 没有定义。

标签： javascript html innerhtml getelementbyid

【解决方案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>

【讨论】：

这就是网上教程的问题，你盲目地复制它，然后当它不起作用时会感到困惑，谢谢：P

【解决方案2】：

你需要修改函数（将'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（也适用于 Chrome）中按 F12 来调出控制台。它显示了一个名为“x”的未定义变量，并告诉我应该更改它的行。

【讨论】：

【解决方案3】：

你需要把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 中。

【讨论】：