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”！
然后在您的函数中，您将检索到的值加倍当你打算将它们总结在一起时，从输入框中输出！
最后，您正在显示它以及您实际看起来的代码好。设置HTML使用时存在一些安全问题 innerHTML，但如果这只是一个页面，而你却不是允许用户使用它设置字符串你应该没问题。请记下来调查一下。

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

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

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

以下是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 Tutorial它非常清晰，易于理解，涵盖了大量的JS基础知识和一些更复杂的东西。

初学者Javascript信用小时计算器

1 个答案: