HTML / Javascript input button images?

Question

Basically I have built a Javascritp quiz and I want to change the input button to an image, however when I change the code and hit the button it just reloads the page and doesn’t calculate the answers.

I have pasted the different codes below. Any help would be much appreciated.

Working:



Not working:

function process()
{

var chop = 0;
var clever = 0;
var window = 0;
var sniper = 0;
var closet = 0;
var shopaholic = 0;

var f = document.f;
var i = 0;

for (i = 0; i < f.a.length; i++) if (f.a[i].checked) value = f.a[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.b.length; i++) if (f.b[i].checked) value = f.b[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.c.length; i++) if (f.c[i].checked) value = f.c[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.d.length; i++) if (f.d[i].checked) value = f.d[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.e.length; i++) if (f.e[i].checked) value = f.e[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.f.length; i++) if (f.f[i].checked) value = f.f[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

for (i = 0; i < f.g.length; i++) if (f.g[i].checked) value = f.g[i].value;
if (value == "1") { chop++; }
if (value == "2") { clever++; }
if (value == "3") { window++; }
if (value == "4") { sniper++; }
if (value == "5") { closet++; }
if (value == "6") { shopaholic++; }

/* -------------------------------- */

i = 0;
var dupe = 0;
var out1 = "";
var out2 = "";
var out3 = "";
var output = "";
var error = 0;
var count = chop + clever + window + sniper + closet + shopaholic;

if (count < 7) { error = 1; }

if (chop > i) { out1 ="chop"; i = chop; }
if (clever == i) { i = clever; dupe++; out1 = "chop"; out2 = "clever"; }
if (clever > i) { out1 ="clever"; i = clever; dupe = 0; }
if (window == i) { i = window; dupe++; if (dupe == 1) { out2 = "window"; } if (dupe == 2) { out3 = "window"; } }
if (window > i) { out1 ="window"; i = window; dupe = 0; }
if (sniper == i) { i = sniper; dupe++; if (dupe == 1) { out2 = "sniper"; } if (dupe == 2) { out3 = "sniper"; } }

if (sniper > i) { out1 ="sniper"; i = sniper; dupe = 0; }
if (closet == i) { i = closet; dupe++; if (dupe == 1) { out2 = "closet"; } if (dupe == 2) { out3 = "closet"; } }
if (closet > i) { out1 ="closet"; i = closet; dupe = 0; }
if (shopaholic == i) { i = shopaholic; dupe++; if (dupe == 1) { out2 = "shopaholic"; } if (dupe == 2) { out3 = "shopaholic"; } }
if (shopaholic > i) { out1 ="shopaholic"; i = shopaholic; dupe = 0; }


if (out1 == "chop") {out1 = "Chop and change clicker";}
if (out2 == "chop") {out2 = "Chop and change clicker";}
if (out3 == "chop") {out3 = "Chop and change clicker";}
if (out1 == "clever") {out1 = "Clever clicker";}
if (out2 == "clever") {out2 = "Clever clicker";}
if (out3 == "clever") {out3 = "Clever clicker";}
if (out1 == "window") {out1 = "Window shopper";}
if (out2 == "window") {out2 = "Window shopper";}
if (out3 == "window") {out3 = "Window shopper";}
if (out1 == "sniper") {out1 = "Sniper shopper";}
if (out2 == "sniper") {out2 = "Sniper shopper";}

if (out3 == "sniper") {out3 = "Sniper shopper";}
if (out1 == "closet") {out1 = "Closet shopper";}
if (out2 == "closet") {out2 = "Closet shopper";}
if (out3 == "closet") {out3 = "Closet shopper";}
if (out1 == "shopaholic") {out1 = "Shopaholic";}
if (out2 == "shopaholic") {out2 = "Shopaholic";}
if (out3 == "shopaholic") {out3 = "Shopaholic";}

if (dupe == 0) { output = out1; }
if (dupe == 1) { output = out1 + " / " + out2; }
if (dupe == 2) { output = out1 + " / " + out2 + " / " + out3; }

if (error == 1) { output = "Please answer all questions"}

document.getElementById('score').innerHTML = "You are a " + output;

//}//close of process()
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}

Answer 1

An 'image' INPUT works the same as a SUBMIT button; so when you press the button, the browser will try to submit the form. You will need to use the ONSUBMIT event handler in the FORM tag to cancel this submission.

eg.

Answer 2

There is a bit more to it than that!
- I believe that the input tag is in a form. In that case, what do you do with the form?
- if you use an image (type='image'), you do not need a "value", unless you are using the value in your script, which you don't.
- If it is a form, by clicking the image, you send the form. What is the method used: POST or GET?
- When the form is received at the server, how do you build the response? If you don't, the server will just send the original HTML back (no calculation).
- A better bet would be to calculate the score in PhP and respond in terms, but that may be a bit complicated for you if you do not know PhP.
- Another solution is this:
In your form, add

Then, in your "process" function, add this at the end (after calculating the score):
document.getElementById('score').value=[the variable you use for the score]
When the user clicks on Compute score, "process" is called, and the field "score" is updated.

Answer 3

You would have to post the code for the process() function.

Answer 4

Best practise is not to use
use css for it
like

Answer 5

Try using the tag instead.

2016-05-19 22:02:46 · answer #5 · answered by Anonymous · 0⤊ 0⤋