CODEWITHSUNDEEP
javascripthtml
MuslimTwin
MuslimTwin

Reputation: 15

How to reset an image after the function has finished

Here, you see an image that says "Type in the box" you type click enter everything works.

After it is done I want it to show the image again. I have this code:

function imageReset() {
    $("#image").reset(); 
}

I do not know how to make it run automatically after it has finished spelling the word

function setLetter(letter) {
  var img = document.getElementById("image");
  if (letter && letter.length == 1) {
    img.src =       "http://thecodingninja.com/muslim/fingerspellingimg/"+letter+"abc.jpg";
  }
  else {
    img.src = "";
  }
}

function nextLetter(word) {
  if (word.length > 0) {
    var firstLetter = word.charAt(0);
    setLetter(firstLetter);
    setTimeout(nextLetter, 1000, word.substring(1));
  }
  else {
    setLetter();

  }
    }

function spellWord() {
  var word = document.getElementById("text").value;
  nextLetter(word.toUpperCase());
  }

Upvotes: 0

Views: 104

Answers (2)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

Just set the source back in the else check of nextLetter function.

function nextLetter(word) {
  if (word.length > 0) {
    var firstLetter = word.charAt(0);
    setLetter(firstLetter);
    setTimeout(nextLetter, 1000, word.substring(1));
  }
  else {
     $("#image").attr('src',"fingerspellingimg/HDabc.jpg");  // set here instead of calling the setLetter again.
  }
 }

So once the above is done you can just keep your function setLetter simple as below

function setLetter(letter) {        
    document.getElementById("image").src = "http://thecodingninja.com/muslim/fingerspellingimg/"+letter+"abc.jpg";     
}

or you can move this line of code into your nextLetter function itself, hence there is no need of this function at all.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78550

I would think all you would need to do is set it on line 7

function setLetter(letter) {
  var img = document.getElementById("image");
  if (letter && letter.length == 1) {
    img.src =       "http://thecodingninja.com/muslim/fingerspellingimg/"+letter+"abc.jpg";
  }
  else {
    img.src = "/muslim/fingerspellingimg/HDabc.jpg"; // <-- right here
  }
}

The logic flows that it'll hit that at the very end after the word is complete.

Upvotes: 1

Related Questions