初学者Javascript学分计算器

我正在尝试在javascript中创建一些东西，以便我计算总学分。我对此很陌生，我什至不知道从哪里开始。

这是我需要做的：

创建一个网页，允许计算学生在学期中学习的总学分。
页面应包含单独的输入字段，以输入学生参加的一、二和三学分课程。
然后单击结果按钮后，应显示总小时数。使用函数计算总小时数。

这是我所拥有的，我不知道它是否正确，所以不要生气：

<script>
    function doSmth(){
            var value = document.getElementById("credithour").value;
            var doubled = value * 2;
            document.getElementById("output").innerHTML = doubled;
    }
    </script>
    <body>
        1 credit hour: <input id="credit"><br />
        2 credit hour: <input id="credit2"><br />
        3 credit hour: <input id="credit3">

        <button onclick="doSmth()">calculate</button>
        <div id="output"></div>

你很接近，但看起来有一些事情你还没有完全掌握。

在您的 HTML 中，您声明了 3 个输入框，这是完美的和您给他们 ID "信用"、"信用 2"和"信用 3"。然而你然后只在你的 JavaScript 函数中抓取其中一个，并且即便如此，您也使用了不正确的名称"CreditHour"！
然后在您的函数中，您将检索到的值加倍从输入框中，当您打算将它们相加时！
最后，您正在显示它并且您的代码实际上看起来还行。使用 HTML 设置存在一些安全问题 innerHTML，但如果这只是你自己的页面，而你不是允许用户使用它设置字符串，您应该没问题。不过，请记下以调查它。

虽然 Stack Overflow 不是一个代码工厂，但我很喜欢你的问题，它很清楚，显示了你到目前为止所做的努力，所以我付出了额外的努力，给你一个工作的例子，希望你可以使用和学习。

它不是世界上最完美的JavaScript，但它会给你足够的开始。

我也强烈推荐jsFiddle做这种事情，它允许你快速编写，测试和与世界其他地方共享JavaScript代码。单击下面的链接，您将能够编辑我的代码，点击 RUN 并查看您的更改如何影响它。然后，您也可以将结果保存到您自己的副本中，只需点击保存并复制链接！

这是 jsFiddle 可以满足您的需求：https://jsfiddle.net/jcos29eb/2/

这是修订后的代码：

.HTML：

<body>
  1 credit hour:
  <input type="number" id="credit1">
  <br /> 2 credit hour:
  <input type="number" id="credit2">
  <br /> 3 credit hour:
  <input type="number" id="credit3">
  <br /> Total:
  <input id="output">
  <br />
  <button onclick="doCalc()">Calculate</button>
</body>

JavaScript：

function doCalc() 
{
  var value1 = document.getElementById("credit1").value;
  var value2 = document.getElementById("credit2").value*2;
  var value3 = document.getElementById("credit3").value*3;
  var total = Number(value1) + Number(value2) + Number(value3);
  document.getElementById("output").value = total;
}

我最后的建议是花一些时间浏览W3Schools JavaScript教程，它非常清晰，易于理解，涵盖了许多JS基础知识和一些更复杂的东西。

相关内容

最新更新

热门标签：