CODEWITHSUNDEEP
javascripthtml
faisal97
faisal97

Reputation: 15

Can't get value of input in Javascript outside the function

I have an input with id input. I have different functions to calculate sin, cos and tan in js. I try this which working smoothly.

function sin() {
    var value = document.getElementById('input').value;
    sine = Math.sin(value);
    document.getElementById('answers').value= sine;}
    
function cos() {
    var value = document.getElementById('input').value;
    cose = Math.cos(value);
    document.getElementById('answers').value = cose;
}
function tan() {
    var value = document.getElementById('input').value;
    tang = Math.tan(value);
    document.getElementById('answers').value = tang;
}
<input type="text" id="input"/>
<button onclick="sin()">Sin</button>
<button onclick="sin()">cos</button>
<button onclick="sin()">tan</button>
<input id="answers"/>

When I try this to make code small it does not work.

var value = document.getElementById('input').value;
function sin() {   
    sine = Math.sin(value);
    document.getElementById('answers').value= sine;}
    
function cos() {
    cose = Math.cos(value);
    document.getElementById('answers').value = cose;
}
function tan() {
    tang = Math.tan(value);
    document.getElementById('answers').value = tang;
}
<input type="text" id="input"/>
<button onclick="sin()">Sin</button>
<button onclick="sin()">cos</button>
<button onclick="sin()">tan</button>
<input id="answers"/>

Any suggestion should be helpful

Upvotes: 0

Views: 601

Answers (2)

RGhanbari
RGhanbari

Reputation: 134

Why it happens? It's because of the priority of loading DOM, first the javascript file load, then did not find any input tag, because it will load afterward.

when you create a function, it added to the window object, and when you call it onclick of a tag, because the DOM is loaded then it's value is accessible.

To access to correct result, you can use one of bellows.

1) If put all javascript into this structure, it will works.

window.onload = function(){
  //Your code
}

2) if you put your script tag bellow of input tag

Upvotes: 0

random_user_name
random_user_name

Reputation: 26160

You are getting the value of the input immediately on load, and only once. You need to get the value when the button is clicked. I'd probably put the "get value" into a function, and call it within the various calculation functions. Additionally, I'd probably make it a single calc function, with a switch to determine which calculation it should do.

This feels DRY-er.

This could be improved even further if you wanted, by using javascript event binding, rather than hard-coding the onclick event into each element.

// single function, accepts a "type" argument
function calc(type) {
  // get the value of the input when the button is clicked
  const value = document.getElementById('input').value;
  // declare the result
  let result = 0;
  switch (type) {
    case 'sin':
      result = Math.sin(value);
      break;
    case 'cos':
      result = Math.cos(value);
      break;
    case 'tan':
      result = Math.tan(value);
      break;
    default:
      break;
  }

  // show the result in the input
  document.getElementById('answers').value = result;
}
<input type="text" id="input" />
<button onclick="calc('sin')">Sin</button>
<button onclick="calc('cos')">cos</button>
<button onclick="calc('tan')">tan</button>
<input id="answers" />

Upvotes: 1

Related Questions