Как вставить изображение при нажатии кнопки

Question

Я создал форму, и я хочу вставить изображение, когда я нажимаю кнопку «Тестер». Это мой код:

<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> 

Это работа, но только половину времени ... И только в течение нескольких секунд ... я не понимаю, почему

Кроме того, я думаю, что, когда я нажимаю на кнопке я обновляю страницу. В URL-адресе у меня есть: /watermark.html в начале и /watermark.html?your+text=, когда я нажимаю кнопку. Но я просто хочу добавить изображение на ту же страницу. Как я могу это сделать?

Answer 1

Вы отправляете свою форму.

Изменить тип ввода от submit по button.

Answer 2

Чтобы избежать страницы использовать обновления ввода типа button не 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>