CODEWITHSUNDEEP
javascripthtml
Charlie Brown
Charlie Brown

Reputation: 21

How to show the Math.sin() result when I input a degree?

I need to create a HTML that I can type a degree,and click the button, the result of its sin shows, and I know that the Math.sin function will see the input value as radian ,so I add a line that multiply the input value *Math.PI/180,but it suddenly doesn't work, which shows "NaN". I will post these two version of my work. Please somebody help me to find what the problem is.This is the version of radian This is the version of degree, which is the way that I want to try,and the coding is down below 

function convert() {

    var deg = document.getElementById("an");
    var ang = deg * Math.PI / 180;
    var si = Math.sin(ang.value);
    console.log(si);
    sc.innerHTML += si
}
 <input type="text" id="an" />
    <input type="button" id="sub" value="click" onclick="convert()" />
    <div id="sc">
    </div>

Upvotes: 1

Views: 169

Answers (6)

Himanshu
Himanshu

Reputation: 96

Quick solution to your code

In this line.

var si = Math.sin(ang.value);

you are using ang.value, which is undefine, and Math.sin(ang.value) i.e Math.sin(undefined) giving you NaN.

Try removing .value and it will work.

var si = Math.sin(ang);

Complete Code

<script>

       function convert(){
       var deg = document.getElementById("an").value;
       var ang = deg* Math.PI/180;
       var si = Math.sin(ang);
       sc.innerHTML += si
     }

    </script>
    <body>
      <input type="text" id="an"/>
      <input type="button" id="sub" value="click" onclick="convert()"/>
      <div id="sc">
      </div>
    </body>

Upvotes: 1

developervenom
developervenom

Reputation: 11

You should extract value from ## Input ## using the value attribute. And pass it as a Number.

input 

<!DOCTYPE html>
<html>
<body>
   <input type="text" id="an"/>
      <input type="button" id="sub" value="click" onclick="convert()"/>
      <div id="sc">
      </div>

<script>
   function convert(){
       var deg = document.getElementById("an").value || 0;
       var ang = Number(deg) * Math.PI/180;
       var si = Math.sin(ang);
       sc.innerHTML += si}
</script>

</body>
</html>

Upvotes: 1

Pankaj Jatav
Pankaj Jatav

Reputation: 2184

< script > function convert ()
{
  var deg = document.getElementById ("an").value;
  // var sc = document.getElementById("sc");
  var ang = parseInt (deg) * Math.PI / 180;
  var si = Math.sin (ang);
sc.innerHTML += si}

</script >
  <body >
  <input type = "text" id = "an" / ><input type = "button" id = "sub" value =
  "click" onclick = "convert()" / ><div id = "sc" > </div > </body >

Upvotes: 1

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

You are calling input, not value inside input

And ang.value is wrong Syntex because ang is not input element:

<script>
   function convert(){

   var deg = document.getElementById("an").value;
   var ang = deg * (Math.PI/180);
   var si = Math.sin(ang);
   sc.innerHTML += si;}
</script>
<body>
  <input type="text" id="an"/>
  <input type="button" id="sub" value="click" onclick="convert()"/>
  <div id="sc">
  </div>
</body>

Upvotes: 1

T&#226;n
T&#226;n

Reputation: 1

You need to use parseInt function to parse the value to numeric before calculating:

function convert(){
   var deg = parseInt(document.querySelector("#an").value) || 0;
   var ang = deg* Math.PI/180;
   var si = Math.sin(ang);
   document.querySelector("#sc").innerText = si;
}
<input type="text" id="an"/>
<input type="button" id="sub" value="click" onclick="convert()"/>
<div id="sc"></div>

Also, you may want to use querySelector instead of getElementById.

Upvotes: 1

Mohamed Farouk
Mohamed Farouk

Reputation: 1107

Change 

var deg = document.getElementById("an");

and

   var si = Math.sin(ang.value);

To

var deg = document.getElementById("an").value;

and

   var si = Math.sin(ang);


function convert(){

       var deg = document.getElementById("an").value;
       var ang = deg* Math.PI/180;
       var si = Math.sin(ang);
       sc.innerHTML += si}
    <body>
      <input type="text" id="an"/>
      <input type="button" id="sub" value="click" onclick="convert()"/>
      <div id="sc">
      </div>
    </body>

Upvotes: 1

Related Questions