如何在按鈕上單擊插入圖像

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>