使用 onClick 事件显示函数的结果

Question

我想用纯 JavaScript（没有 Jquery）解决这个问题

我写了一个函数来解决 Project Euler 的第一个问题。我想制作一个按钮来检索输入字段中放置的任何值，运行该函数，然后在单击后在单独的 div 中显示结果。

function problem1() {
    var sum = 0;

    for (var i = 0; i < sum; i++){

    if((i % 3 === 0) || (i % 5 === 0)){
        sum += i;
    };
}

<div class = "problem1">
      <h4>Problem 1: Multiples of 3 and 5</h4>
      <p>If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.</p>
      <p>Find the sum of all the multiples of 3 or 5 below <b>1000.</b></p>

      <input id = "input" type = "text" value ="1000"></input>
      <button onclick = "getElementById('input').innerHTML=showResult()">Solve</button>
      <div id = "result"></div>
</div>

这是一个 jsfiddle 来展示我正在使用的东西：http://jsfiddle.net/wh9uj2j6/1/

Answer 1

function problem1() {
    var sum = 0;

    for (var i = 0; i < sum; i++){ //This loop will never run since sum == 0

    if((i % 3 === 0) || (i % 5 === 0)){
        sum += i;
    };
    //nothing is returned.
}

其他问题：showResult()不是函数，getElementById('input').innerHTML应该是getElementById('input').value。

我想你想做的是：

function problem1(num) {
    var sum = 0;

    for (var i = 0; i < num; i++)
    {
        if((i % 3 === 0) || (i % 5 === 0))
        {
            sum += i;
        }
    }
    return sum;
}

<div class = "problem1">
      <h4>Problem 1: Multiples of 3 and 5</h4>
      <p>If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.</p>
      <p>Find the sum of all the multiples of 3 or 5 below <b>1000.</b></p>

      <input id = "input" type = "text" value ="1000"></input>
      <button onclick = "getElementById('input').value=problem1(getElementById('input').value)">Solve</button>
      <div id = "result"></div>
</div>

Answer 2

你的整个 javascript 函数没有意义，试试这个：

function solve() {

    var sum = 0;  // result var
    var input = document.getElementById('input').value; // input for iteration
    for(var i = 0; i < input; i++) {
        if((i % 3 === 0) || (i % 5 === 0)) {
           sum += i;
        }
    }

    document.getElementById('result').innerHTML = sum; // print result in div
}

使用 onClick 事件显示函数的结果

Displaying the results of a function using the onClick event

html

javascript