value method not working function callback

Question

I am creating a small program that returns the results of a mathematical equation. I have a number input field with the ID and CLASS "value1" (I've attempted to manipulate using both) that allows the user to put in a number value. I have another number input field that is disabled with the ID and CLASS "result1" that displays the results of the equation.

I have a button with the ID solution1_btn that when clicked is suppose to initiate the "multiples" function callback which takes "value1" as an argument.

When I replace "value1" which a physical number e.g. 1000, the results of the equation appears in "result1" without pressing solution1_btn, however when i put "value1" as the argument and press solution1__btn it does not work.

Below is the section of JavaScript code that I have narrowed the problem to and HTML.

JS:

 // declare Euler1 assign it to function with parameter num

// click button
var solution1 = document.getElementById("solution1_btn");

// user entered value
//var value1 = document.getElementById("value1");
var value1 = document.getElementsByClassName("result1")[0].value;
//console.log(value1);

// result input field
var result1 = document.getElementById("result1");


function multiples(num) {

    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if (i % 3 || i % 5 === 0) {
            // assigns the value of i to sum 
            sum += i;
            var newSum;
            result1.value = newSum;
            newSum = sum;
        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return newSum;
};

var fix = value1;

solution1.onclick = multiples(fix);

HTML:

<label for="value">Enter Value: </label>
            <input id="value1" class="value1" type="number" title="value field" placeholder="e.g. 1000">
            <button type="button" id="solution1_btn" title="solution 1 button">Enter</button>
            <input id="result1" class="result1" type="number" disabled>

Answer 1

Gosh, there is quite a few problems with your code, I'll try to run through them all.

---

Referencing HTML elements

HTML elements can be referenced in many ways, as you have discovered. Generally, you should pick the most appropriate and stick with it. If you use an id and a class things get confusing quickly - espcially seeing as id's should be unique, but classes need not necessarily be so. In your case, I think you're safest to stick with id, and then always use document.getElementById.

Multiple boolean checks

Regarding this line of code

if (i % 3 || i % 5 === 0) {

You probably expect that that equates to "if i is divisible by 3 or 5", and that is a logical (and often misunderstood) part of boolean logic. In actual fact, you should think "if i is divisible by 3 or i is divisible by 5", which equates to the following in code

if ((i % 3) === 0 || (i % 5) === 0) {

Yes, unfortunately you need to repeat the === 0 part twice.

Variable scope

This one's a big subject, and there is plenty of other information on the subject, but suffice it to say that in your function newSum is defined only inside an if block, and is redefined every iteration of your loop, so it wont contain the sum as you may be expecting.

In any case, it's uneccessary, you should just return sum

function multiples(num) {

    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if ((i % 3) === 0 || (i % 5) === 0) {
            // assigns the value of i to sum 
            sum += i;

        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return sum;
};

Event handlers

You are trying to set an event to occur onclick with this code

solution1.onclick = multiples(fix);

This attempts to add an event handler with the result of calling multiples - not multiples itself. You should assign the event handler a function, and assign the value of the field to the result of calling the multiples function.

solution1.onclick = function(){
    result1.value = multiples(parseInt(value1.value,10));
};

Working example

Below is a working example of your code, hopefully helps you pull this all together.

var solution1 = document.getElementById("solution1_btn");
var value1 = document.getElementById("value1");
var result1 = document.getElementById("result1");

function multiples(num) {
    // declare sum assign it value 0   
    var sum = 0;
    //  declare a for loop that iterates while the counter "i" is less than num   
    for (var i = 0; i < num; i++) {
        // if statement test whether the division remainder of 3 and 5 are equal to 0
        if ((i % 3) === 0 || (i % 5) === 0) {
            // assigns the value of i to sum 
            sum += i;           
        };
    };
    // returns the value of sum from the function callback argument 1000 etc.

    return sum;
};

solution1.onclick = function(){
     result1.value = multiples(parseInt(value1.value,10));   
}

<label for="value">Enter Value: </label>
<input id="value1" class="value1" type="number" title="value field" placeholder="e.g. 1000">
<button type="button" id="solution1_btn" title="solution 1 button">Enter</button>
<input id="result1" class="result1" type="number" disabled>

Answer 2

Here is a fiddle with you problem - I hope solved: http://jsfiddle.net/w0qvdqb2/

There are few different problems in your code, first:

solution1.onclick = multiples(fix);

this means that multiples method should execute and return value is assigned to variable solution1.onclick but solution1.onclick accept callback.

Than based on your comments condition hasn't beed written as it's described.

And mixing with inputs and outputs classes and ids.

Please review updated code.