Getting a Variable Set in JavaScript and then Calling/Printing it in an HTML Table

Question

I've been trying to make a program that automatically writes two-column algebraic and geometric proofs. I'm sure this has already been done, but I want to do it anyway. I am somewhat inexperienced with HTML and JavaScript (I've mainly been trying to learn from online resources) and I'm having trouble getting a variable to print. Here's the code that I've written so far, I want "x" to be the user input of what is "given" in the desired problem. I will later have the program check if the format of the input is valid and also make the table expand by one for each step that it decides it needs to take to get closer to the statement that it is trying to prove.

<HTML>
<body>
<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
    <form id='user-input'>
        <input type='text' id='given' placeholder='Given Information'></input>
    </form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
    <form id='user-input'>
        <input type='text' id='prove' placeholder='Statement to Prove'></input>
    </form>
<button id='submit' onClick="edit()">Submit</button>
<print><var ="x"></var></print>
<script>
<function> edit()
{
     x = document.getElementById('Input1').value;
     y = document.getElementById('Input2').value;   
}
</function>
</script>
<br>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>

<body>

<table style="width:100%">
<col Width="15">
<col Width="300">
<col Width="500">
  <tr>
    <th>Step Number</th>
    <th>Step</th>       
    <th>Explaination</th>
  </tr>
  <tr>
    <td>1</td>
    <td><var="x"></var></td>        
    <td>Given</td>
</table>
</div>
</body>
</html>

Anything you all have on how to get this to work (preferably without extremely altering the format or switching programming languages) would be awesome, and any tips you guys have for the rest of my project would be great too. I apologize if this is a newbie question.

manishie · Accepted Answer · 2014-09-19 03:45:22Z

3

You're mixing up javascript and html. the <script></script> tags indicate that everything in between is javascript. So then inside them, you would use function, not <function></function> to specify your function.

And echo will print the results.

<script>
  function edit()
  {
       x = document.getElementById('given').value;
       y = document.getElementById('prove').value;   
       echo x * y;
  }

</script>

UPDATE:

To answer your question, you should read up on some javascript/web dev resources to learn good site structure. You really don't want your javascript all mixed into your code.

You should at least put your javascript code in a separate file. e.g. call your file script.js, remove the script tags, put your functions there, then include it in the <head> like this:

<script src="scripts.js"></script>

The above is simple and you should do it. The following is a bit tricker and perhaps saved for when you become a web development expert. Soon I'm sure! :-)

Ideally you would put your javascript in there using something like jQuery, which would run after the document loads, make the calculations, then update the appropriate areas on your page.

But for now what you can do is wherever in your html page you want to display the data, just put another script tag and run the function (that you have included from your script.js file).

Something like:

Results: 
<script>
  edit();
</script>

UPDATE 2:

Sorry I didn't notice that you had the wrong Ids (input1 and input2). getElementById needs the html id that you used to create the elements. I've updated the code

edited Sep 19, 2014 at 3:45

answered Sep 19, 2014 at 2:56

manishie

5,3321 gold badge23 silver badges21 bronze badges

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

2 Comments

Rnivium Over a year ago

Will the echo work if I want to print the variable outside of the <script>? Is it possible to do so?

Rnivium Over a year ago

And also, is the getElementById calling on Input1 or should I make it call something else to get the input of the first textbox?

Collectives™ on Stack Overflow

Getting a Variable Set in JavaScript and then Calling/Printing it in an HTML Table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related