external javascript function and html button

Question

beginner to html, javascript, and stack overflow so take it easy on me. i am trying to get my html to pop up a display that will use the function of the external js file to do calculations, but for now i will keep it simple:

function findA(x, y, z) {
  var I = (x*100);
  var N = (y/100);
  var S = (z+50);
  document.write(x,y,z);
  }

that is all there is in the js file, now on to the html:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
          <script src="scripts/main.js"></script>
        <![endif]-->
    </head>
     <body>
      <article>
       <form>
         <fieldset id="button">
          <input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>
         </fieldset>
       </form>
      </article>
     </body>

thats it for the html. it should just display one button on html screen. not sure what to do afterwords so any help will be greatly appreciated!

EDIT: *

my new code is this:

 <!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
          <script src="scripts/main.js"></script>
        <![endif]-->
    </head>
     <body>
      <article>
       <form>
         <fieldset id="button">
           <input type="button" id= "submit" value= "Calculate" onclick='alert(monthly(1,5,8))'>
         </fieldset>
       </form>
      </article>
     </body>

and the js file is:

function monthly(x, y, z) {
 var I = (x*100);
 var N = (y/100); 
 var S = (z+50);
 var A = ("I: " + I + "N: " + N + " S: " + S);
 return A;
  }

yet nothing happens when i click calculate. i am using chrome to test this as well as Internet Explorer. i dont see what could be wrong about this. suggestion?

It is not exactly clear for me that, you want to achieve. You want to write the output of your function to the top of your page, do you? Or want to shove in a popup? I think <input> element should have closed like this -> <input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'/> — czupe
– czupe, Commented Jun 12, 2015 at 0:19

David W · Accepted Answer · 2015-06-13 02:46:44Z

1

First, change your "document.write" to "return" in your javascript. document.write will erase the existing HTML in the document, and won't provide a popup you have asked for.

For the rest, there are a few approaches, but I'd offer that the simplest suggestion would be to take this line:

<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>

and change it to (updated):

<input type="button" id= "submit" value= "Calculate" onclick='alert(monthly(1,5,8))'>

EDIT: The following jsfiddle works: (https://jsfiddle.net/7stL2cmL/12/)

<!DOCTYPE html>
<body>
    <head>
        <script type="text/javascript">
        function monthly(x, y, z) {
    var I = (x * 100);
    var N = (y / 100);
    var S = (z + 50);
    var A = ("I: " + I + "N: " + N + " S: " + S);
    return A;
        }
        </script>
        </head>

    <article>
        <form>
            <fieldset id="button">
                <input type="button" id="submit" value="Calculate" onclick='alert(" dddd"+monthly(1,5,8))'>
            </fieldset>
        </form>
    </article>
</body>

edited Jun 13, 2015 at 2:46

answered Jun 12, 2015 at 0:20

David W

10.2k38 silver badges60 bronze badges

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

9 Comments

Final Omega Over a year ago

nothing is happening for some reason. i see the logic of it but when i click calculate no pop up appears. i dont understand why this is happening. i changed the code: document.write(); to: return; as well as adding x y and z to a new var A (the sum) but nothing is working. i tried google chrome as well as Internet Explorer.

David W Over a year ago

There! Needed to alert the function that actually returned a value. Document.write won't return anything. See how that works for you.

Final Omega Over a year ago

still nothing... im wondering if its some sort of error via browser (shouldnt be). ill post the new code i used ur code to change. check the edit part one more time.

David W Over a year ago

Can you put it into a jsfiddle? Ican take a look there. Probably something simple.

David W Over a year ago

Have you tried running it in the debugger or seeing what the console has to say? Might just be a subtle typo.

|

JGV · Accepted Answer · 2015-06-12 00:20:00Z

0

Use onclick instead of onsubmit.

function findA(x, y, z) {
  var I = (x*100);
  var N = (y/100);
  var S = (z+50);
  document.write(x,y,z);
  }

<fieldset id="button">
   <input type="submit" id= "submit" value= "Calculate" onclick='findA(1,5,8)'>
</fieldset>

answered Jun 12, 2015 at 0:20

JGV

5,2079 gold badges57 silver badges101 bronze badges

Comments

Mariano Montañez Ureta · Accepted Answer · 2015-06-12 00:24:07Z

0

first;: the html will show the button, but the document.write will never be seen by the user befouse is executed onsubmit , if you wan to test you must edit the function like this

    function findA(x, y, z) {
      var I = (x*100);
      var N = (y/100);
      var S = (z+50);
      document.write(x,y,z);
      return false;
  }

and then in the html submit use:

<input type="submit" id= "submit" value= "Calculate" onsubmit='return findA(1,5,8)'>

second: the script include it will work only for internet explorer 9 or less so if you are testing with a browser that doesn't match that version change the conditional include

answered Jun 12, 2015 at 0:24

Mariano Montañez Ureta

1,15611 silver badges21 bronze badges

Comments

Diwas · Accepted Answer · 2015-06-12 00:27:52Z

0

<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <!--[if lt IE 9]>
          <script src="scripts/main.js"></script>
        <![endif]-->
    </head>
     <body>
      <article>
       <form>
         <fieldset id="button">
          <input type="submit" id= "submit" value= "Calculate" onclick='findA(1,5,8)'>
         </fieldset>
       </form>
      </article>
     </body>

change to onsubmit to onclick as you haven't used a form there.

new javascript code to display popup

function findA(x, y, z) {
            var I = (x*100);
            var N = (y/100);
            var S = (z+50);
            alert(I+N+S);
        }

hope this helps

answered Jun 12, 2015 at 0:27

Diwas

7736 silver badges13 bronze badges

Comments

czupe · Accepted Answer · 2015-06-12 00:51:52Z

0

Nobody seems to notice, but your input element should have closed:

<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'>

Like this:

<input type="submit" id= "submit" value= "Calculate" onsubmit='findA(1,5,8)'/>

edited Jun 12, 2015 at 0:51

answered Jun 12, 2015 at 0:26

czupe

5,0047 gold badges36 silver badges53 bronze badges

Comments

debatanu · Accepted Answer · 2015-06-13 02:35:43Z

0

One question, Is the external file main.js? If so then only IE9 and below will be able to understand the conditional comments . Place the reference to the main.js outside the conditional comments like

<head>
    <meta charset="utf-8" />
    <script src="scripts/main.js"></script>
</head>

For more details about conditional comments you can refer http://www.quirksmode.org/css/condcom.html

answered Jun 13, 2015 at 2:35

debatanu

7765 silver badges11 bronze badges

1 Comment

Final Omega Over a year ago

wow thanks that did it. i thought that comment was meant for IE 9 and above.

Collectives™ on Stack Overflow

external javascript function and html button

6 Answers 6

9 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related