www.webdeveloper.com
Results 1 to 7 of 7

Thread: erase image with function clear button

  1. #1
    Join Date
    Dec 2010
    Posts
    10

    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 document.getElementById('img').src = 'empty.gif'; 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.

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    onClick="cleartext(input)"
    should be
    onClick="cleartext(this.form)"
    for the reset button.
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

  3. #3
    Join Date
    Dec 2012
    Location
    Manchester
    Posts
    15
    Thnx for sorting out the Reset button code

  4. #4
    Join Date
    Dec 2010
    Posts
    10
    Unfortunately, that doesn't work either.

  5. #5
    Join Date
    Dec 2010
    Posts
    10
    Anyone with another solution?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb

    I dont' have your images, so make the correct substitutions for 'baseURL' and 'imgPics' variables.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    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.
    
    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 `WHO` 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('<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(this.form)"> ');
    // document.write('<img src="'+baseURL+imgPics[2]+'" id="img" /> <br/> ');
    document.write('<img src="" 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.
    </script>
    
    </head>
    <body>
    
    </body>
    </html>
    Good Luck!

  7. #7
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Quote Originally Posted by jptib View Post
    Unfortunately, that doesn't work either.
    The tiny change I posted makes the script work in Chrome, Firefox and IE. What browser are you using? :/
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles