/    Sign up×
Community /Pin to ProfileBookmark

erase image with function clear button

The following script shows an image “correct.gif” or “incoorect.gif” according to the given answer.
When clicking the “clear”-button it erases the words of the feedback but not the image.
I thought I could add [COLOR=#0000CD]document.getElementById(‘img’).src = ’empty.gif’;[/COLOR] to the cleartext function while refering to this function from the “clear”-button. It erases the text, but doesn’t change the image with the empty.gif image. Maybe a stupid question, but I’m an absolute newbie and am just learning.

[CODE]var question1 = ‘<strong>Who</strong>……………..?’;
var choice1 = ‘Mr. Johnson.’;
var choice2 = ‘In 1875.’;
var choice3 = ’78 years old.’;
var choice4 = ‘In 1949.’;
var correctAnswer = 1; // Indicate the best answer with this variable.

function check(input,x) {
if (x==0) {
alert(“You didn’t choose an answer”);
} else {
if (x==correctAnswer) {
input.result.value = “Excellent! When the question starts with `WHO` your answer should be a name or describe someone.”;
document.getElementById(‘img’).src = ‘correct.gif’;
} else {
input.result.value = “This answer is incorrect. The answer on a ‘WHO’ question can’t be a time expression or age.”;
document.getElementById(‘img’).src = ‘incorrect.gif’;
}
}
}

function cleartext(input) {
input.result.value = ”; // Clear text field.
document.getElementById(‘img’).src = ’empty.gif’;
}

// Initialize answer to 0 to trap no selection.
answer=0;

// Generate the HTML code for the top of the web page.
document.write(‘<HR>’);
document.write(question1);

// Generate the HTML code for the radio button choices.

document.write(‘<FORM NAME=”questn1″ id=”form_questions”>’);
document.write(‘<OL”>’);
document.write(‘<LI><input type=”radio” name=”answera” onClick=”answer=1″>’,choice1);
document.write(‘<LI><input type=”radio” name=”answera” onClick=”answer=2″>’,choice2);
document.write(‘<LI><input type=”radio” name=”answera” onClick=”answer=3″>’,choice3);
document.write(‘<LI><input type=”radio” name=”answera” onClick=”answer=4″>’,choice4);
document.write(‘</OL>’);

// Generate the HTML code for the buttons and response text area.
document.write(‘<HR>’);
document.write(‘<INPUT TYPE=”button” VALUE=”Check Answer” onClick=”check(this.form,answer)”> ‘);
document.write(‘<INPUT TYPE=”reset” VALUE=” Clear ” onClick=”cleartext(input)”> ‘);
document.write(‘<img src=”empty.gif” id=”img” /> <br/> ‘);
document.write(‘<INPUT TYPE=”text” NAME=”result” SIZE=”100″ class=”style55″ > <br/> ‘);
document.write(‘</FORM>’);

cleartext(document.questn1); // Clear text field on reload.[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@ReFreezedJan 06.2013 — [FONT=courier new]onClick="cleartext(input)"[/FONT]

should be

[FONT=courier new]onClick="cleartext(this.form)"

[/FONT]for the reset button.
Copy linkTweet thisAlerts:
@DanielliJan 07.2013 — Thnx for sorting out the Reset button code ?
Copy linkTweet thisAlerts:
@jptibauthorJan 07.2013 — Unfortunately, that doesn't work either.
Copy linkTweet thisAlerts:
@jptibauthorJan 07.2013 — Anyone with another solution?
Copy linkTweet thisAlerts:
@JMRKERJan 07.2013 — I dont' have your images, so make the correct substitutions for 'baseURL' and 'imgPics' variables.
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
var question1 = '&lt;strong&gt;Who&lt;/strong&gt;.................?';
var choice1 = 'Mr. Johnson.';
var choice2 = 'In 1875.';
var choice3 = '78 years old.';
var choice4 = 'In 1949.';
var correctAnswer = 1; // Indicate the best answer with this variable.

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgPics = ['11.jpg','22.jpg','33.jpg']; // correct, incorrect or empty image filename

function check(input,x) {
if (x==0) {
alert("You didn't choose an answer");
} else {
if (x==correctAnswer) {
input.result.value = "Excellent! When the question starts with <span><code>WHO</code></span> your answer should be a name or describe someone.";
document.getElementById('img').src = baseURL+imgPics[0]; // 'correct.gif';
} else {
input.result.value = "This answer is incorrect. The answer on a 'WHO' question can't be a time expression or age.";
document.getElementById('img').src = baseURL+imgPics[1]; // 'incorrect.gif';
}
}
}

function cleartext(input) {
input.result.value = ''; // Clear text field.
document.getElementById('img').src = ''; // baseURL+imgPics[2]; // 'empty.gif';
}

// Initialize answer to 0 to trap no selection.
answer=0;

// Generate the HTML code for the top of the web page.
document.write('&lt;HR&gt;');
document.write(question1);

// Generate the HTML code for the radio button choices.

document.write('&lt;FORM NAME="questn1" id="form_questions"&gt;');
document.write('&lt;OL"&gt;');
document.write('&lt;LI&gt;&lt;input type="radio" name="answera" onClick="answer=1"&gt;',choice1);
document.write('&lt;LI&gt;&lt;input type="radio" name="answera" onClick="answer=2"&gt;',choice2);
document.write('&lt;LI&gt;&lt;input type="radio" name="answera" onClick="answer=3"&gt;',choice3);
document.write('&lt;LI&gt;&lt;input type="radio" name="answera" onClick="answer=4"&gt;',choice4);
document.write('&lt;/OL&gt;');

// Generate the HTML code for the buttons and response text area.
document.write('&lt;HR&gt;');
document.write('&lt;INPUT TYPE="button" VALUE="Check Answer" onClick="check(this.form,answer)"&gt; ');
document.write('&lt;INPUT TYPE="reset" VALUE=" Clear " onClick="cleartext(this.form)"&gt; ');
// document.write('&lt;img src="'+baseURL+imgPics[2]+'" id="img" /&gt; &lt;br/&gt; ');
document.write('&lt;img src="" id="img" /&gt; &lt;br/&gt; ');
document.write('&lt;INPUT TYPE="text" NAME="result" SIZE="100" class="style55" &gt; &lt;br/&gt; ');
document.write('&lt;/FORM&gt;');


cleartext(document.questn1); // Clear text field on reload.
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

Good Luck!
Copy linkTweet thisAlerts:
@ReFreezedJan 07.2013 — Unfortunately, that doesn't work either.[/QUOTE]
The tiny change I posted makes the script work in Chrome, Firefox and IE. What browser are you using? :/
×

Success!

Help @jptib spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...