How to display javascript results on the same page

Question

I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page underneath the Calculate Button. Here is what I have so far:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles/formula_styles.css">

	<script type="text/javascript">

		var a,b,c;
		function setValues1()
		{
			a = Number(document.getElementById("a").value);
			b = Number(document.getElementById("b").value);
			c = Number(document.getElementById("c").value);
		}

		function and()
		{
			setValues1();
			result1 = (-b + Math.sqrt(b*b -4*a*c))/(2*a);
			result2 = (-b - Math.sqrt(b*b -4*a*c))/(2*a);
			alert("The volume of this cube is " +result1 + " and " +result2);
		}

	</script>

</head>
<body>

<nav>
	<a href="index.html">Home</a> // <a href="levels.html">Grade Levels</a>
</nav>

<div id="container">
	<div id="formula">	
		<input type="text" id="a" placeholder="'A' Variable"/><br>
		<input type="text" id="b" placeholder="'B' Variable"/><br>
		<input type="text" id="c" placeholder="'C' Variable"/><br>
		<input type="button" onclick="and()" value="Calculate!"/>
	</div>

</div>
</body>
</html>

You may need to state what the problem you have.

mhs
– mhs

2015-05-28 01:13:52 +00:00
Commented May 28, 2015 at 1:13 — mhs
– mhs, Commented May 28, 2015 at 1:13

pcnate · Accepted Answer · 2015-05-28 01:08:09Z

1

add an element to your html, something like this:

<div id="results"></div>

Then instead of using an alert, you can do something along the lines of this:

document.getElementById("results").innerHTML = "The volume of this cube is " +result1 + " and " +result2;

answered May 28, 2015 at 1:08

pcnate

1,7941 gold badge20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sumner Evans · Accepted Answer · 2015-05-28 01:07:28Z

Create a div under the button and populate the innerHTML of the div:

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles/formula_styles.css">

  <script type="text/javascript">
    var a, b, c;

    function setValues1() {
      a = Number(document.getElementById("a").value);
      b = Number(document.getElementById("b").value);
      c = Number(document.getElementById("c").value);
    }

    function and() {
      setValues1();
      result1 = (-b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
      result2 = (-b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
      document.getElementById('result').innerHTML = "The volume of this cube is " + result1 + " and " + result2;
    }
  </script>

</head>

<body>

  <nav>
    <a href="index.html">Home</a> // <a href="levels.html">Grade Levels</a>
  </nav>

  <div id="container">
    <div id="formula">
      <input type="text" id="a" placeholder="'A' Variable" />
      <br>
      <input type="text" id="b" placeholder="'B' Variable" />
      <br>
      <input type="text" id="c" placeholder="'C' Variable" />
      <br>
      <input type="button" onclick="and()" value="Calculate!" />
      <div id="result">

      </div>
    </div>

  </div>
</body>

</html>

Sumner Evans · Accepted Answer · 2015-05-28 01:12:47Z

0

You can do this by setting up an element you wish to contain the text.

document.getElementById("result").innerHTML = "The volume of this cube is " +result1 + " and " + result2;

To do this you need set the element up with an ID of result.

This line of code is calling the function getElementByID to get the element, which then lets you change its innerHTML property.

The element you assign to this can be whatever you want it to be.

edited May 28, 2015 at 1:12

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

answered May 28, 2015 at 1:07

steve

1511 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to display javascript results on the same page

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related