Using Javascript to Modify HTML Content

Question

It is doubtful that this requires a lot of explanation, but I think I need a second set of eyes to check it, because I just can’t understand why it will not! Try using the “Energy Calculator”, and no value will be returned when sending, despite the fact that I approach it in the same way as the “Battery Charge Calculator", which works.

Link: http://jsfiddle.net/Deva/426Jj/

Answer 1

To answer @alex in more detail, you selected the onLoad jsFiddle option, which places your JavaScript code inside an anonymous function:

 window.onload = function() { function energyCalc() { var mass = document.forms['0'].mass.value; var finalMass = mass * 1000; var velocity = document.forms['0'].velocity.value; var finalVelocity = velocity * 0.3048; var energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))); if ((mass && velocity) != '') { document.getElementById("energy").innerHTML = 'Energy of weapon: ' + energy + ' Joules'; } else { document.getElementById("energy").innerHTML = 'You must enter values in both fields!'; } } } 

Try this for size: http://jsfiddle.net/mattball/Cbsa8/ . All I did was select no wrap (head) and No library .

Keep in mind that it is better to use encoding to write unobtrusive JavaScript . In this case, you are binding the event handler using JavaScript using attachEvent (for IE <9) or addEventListener (for real browsers).

---

Edit re: file editing

Open the console and the problem will immediately become apparent after trying to use the energy calculator:

 > Uncaught TypeError: Cannot read property 'value' of undefined (fiddle.jshell.net:100) 

which is this line:

 var mass = document.forms['0'].mass.value; 

You get access to the wrong form. You need to change all cases of forms['0'] to forms[1] in the code of the energy calculator. Pay attention to the missing quotes, by the way - document.forms is an array, not an object!

Also, you are explicitly using jQuery, but you are not using it wherever you can. Why not? There are many opportunities to improve your code. This is a cleaning time!

HTML

 <div id="main"> <a href="#"><h3>Battery Charge Calculator</h3></a> <div class="slide"> <form id="batteryForm" action=""> <p> Battery Capacity (mah): </p> <p> <input name="capacity"/> </p> <p> Charge Rate (mA): </p> <p> <input name="rate"/> </p> <p> <input type="submit" value="Submit"/> </p> <br/> <p id="time"/> </form> </div> <a href="#"><h3>Energy Calculator</h3></a> <div class="slide"> <form id="energyForm" action=""> <p> Mass of BB (grammes): </p> <p> <input name="mass"/> </p> <p> Power of weapon (FPS): </p> <p> <input name="velocity"/> </p> <p> <input type="submit" value="Submit"/> </p> <br/> <p id="energy"/> </form> </div> </div> 

Javascript

 $(function() { $('#main > a > h3').click(function() { $(this).closest('a').next('div.slide').animate({ height: 'toggle' }, 750); }); function batteryCalc() { var capacity = this.capacity.value, rate = this.rate.value, time = capacity / (rate / 1.2), chargeTime = (Math.round(10 * time) / 10).toFixed(1), message = 'You must enter values in both fields!'; if (capacity && rate) { message = 'Required time on charge: ' + chargeTime + ' hours'; } $('#time').html(message); return false; } function energyCalc() { var mass = this.mass.value, finalMass = mass * 1000, velocity = this.velocity.value, finalVelocity = velocity * 0.3048, energy = (0.5 * (finalMass * (finalVelocity * finalVelocity))).toFixed(1), message = 'You must enter values in both fields!'; if (mass && velocity) { message = 'Energy of weapon: ' + energy + ' Joules'; } $('#energy').html(message); return false; } $('#batteryForm').submit(batteryCalc); $('#energyForm').submit(energyCalc); }); 

Demo: http://jsfiddle.net/mattball/JSpaU/

Answer 2

See the drop-down on the left that says "onLoad"? Change it to "no wrap (head)" and it will work.

Answer 3

This is because of how jsfiddle works. You need to declare the energyCalc function as follows:

 window.energyCalc = function() { ... } 

Answer 4

energyCalc() enclosed in a function ( load event function) and is not displayed in the global scope.

It works when it is made global.

jsFiddle .

Answer 5

Remove action = "javascript:energyCalc()"

and add:

 jQuery(document).ready(function() { jQuery(document.forms[0]).submit(energyCalc); }); 

Strike> No jquery

 <form method="post" onsubmit="energyCalc();" > 

EDIT

Return values ​​are also needed (true or false)

Check out: http://jsfiddle.net/SabAH/7/ http://jsfiddle.net/SabAH/11/

UPDATE :

The action attribute tells the browser where to send messages. The function must be running onsubmit .

UPDATE2 . Seeing the new jsfiddle

http://jsfiddle.net/426Jj/2/

There were a few mistakes. Firstly, your action="javascript:..." should be onsubmit="javascript: return ..." and remove the onclick of the submit buttons, the energy method needed to link forms[1] not forms[0] , because it was the second form. This is basically it.

look: http://jsfiddle.net/426Jj/2/