如何在按钮上单击插入图像

Question

I have create a form, and I want to insert image when I click on the button "tester". This is my code :

<table id="table">
   <tr>
       <td id="col1">
           <form>

               <p><label for="text"> your text</label>:<input type="text" id="text"></input></p>

               <input type="submit" value="tester" onclick="addImage()" />
           </form>
       </td>
       <td id = "img"></td>
   </tr>
</table>




<script>
function addImage(){
    document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"
}
</script>


<style>
#table{width:100%}
#col1{width:50%}

</style>

It's work but just half a time ... And just during a few second ... I don't understand why

Moreover I think that when I click on the button I refresh the page. In the URL I have : /watermark.html at the beginning and /watermark.html?your+text= when I click on the button. But I just want to add an image on the same page. How can I do this?

Answer 1

You submitting Your form.

Change type of input from submit to button .

Answer 2

To avoid page refresh use input type button not submit

 function addImage(){ document.getElementById("img").innerHTML = "<img src='newWatermark.png'/>"; //This will overwrite previous image } function appendImage(){ document.getElementById("img").innerHTML += "<img src='newWatermark.png'/>"; //This will append image } 

 #table{width:100%} #col1{width:50%} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tr> <td id="col1"> <form> <p><label for="text"> your text</label>:<input type="text" id="text"></input></p> <input type="button" value="tester" onclick="addImage()" /> <input type="button" value="Append" onclick="appendImage()" /> </form> </td> <td id = "img"></td> </tr> </table>