初学者Javascript学时计算器

Question

我正在尝试在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>

Answer 1

您已经很接近了，但是似乎有些事情您还没有完全掌握。

在您的HTML中，您声明了3个输入框，它们是完美的，并为它们提供了id“ credit”，“ credit2”和“ credit3”。 但是，您随后只能在JavaScript函数中使用它们之一，即使您使用了错误的名称“ credithour”！
然后，在您打算将它们加在一起时，您将从输入框中检索到的值加倍！
最后，您正在显示它，并且您的代码实际上看起来还不错。 使用innerHTML设置HTML周围存在一些安全问题，但是如果这只是您自己的页面，并且您不允许用户使用它来设置字符串，则应该没问题。 做个笔记看看。

尽管Stack Overflow并不是代码工厂，但我很喜欢您的问题，它很清楚并且显示了您到目前为止所做的工作，因此，我付出了额外的努力，为您提供了一个可行的示例，希望您可以使用并从中学习。

它不是世界上最完美的JavaScript，但它将为您提供足够的入门知识。

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

这是执行您要查找的内容的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基础知识和一些更复杂的内容。

初学者Javascript学时计算器

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-01-31 02:07:40

初学者Javascript学时计算器

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-01-31 02:07:40

解决方案1
1 已采纳 2016-01-31 02:07:40