CODEWITHSUNDEEP
javascripthtmlcss
BreadCat
BreadCat

Reputation: 23

How do I stop the text from appearing then disappearing a second later, using Javascript?

I'm trying to get text to show up in a div by using 

  function frenchBread(){
      var div = document.getElementById("orderBox");

      div.innerHTML = div.innerHTML + "French Bread";
  }

I have created an inpute type = image that will use this function with an onclick event. It works, however, the text shows up in the div for a second then disappears. I'm not sure if this problem is relevant to the fact that this div is inside of a table, too. Sorry, I'm somewhat of a newbie at javascript and html.

      <td>
        <div class = "order">
          <p>Your Order:</p>
          <p id = "orderBox"></p>
        </div>
      </td>

The above is the part of the table that the div is in.

<input type = "image" class = "items" src ="FrenchBread.png" value = "frenchBread" onclick = "frenchBread()">

The above is where I called the function.

Upvotes: 0

Views: 956

Answers (1)

Quentin
Quentin

Reputation: 943938

An image input is a server side image map. Clicking on it will submit the form it is in. This will cause a new page to be loaded.

Use a button instead.

<button type="button" onclick="..."><img ...></button>

Apply CSS to remove any borders and background colour as desired.

Upvotes: 1

Related Questions