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

how to insert image on button click

本文关键字：按钮 单击 图像 何插入 插入      更新时间：2023-09-26

我已经创建了一个表单，当我点击按钮"tester"时，我想插入图像。这是我的代码:

<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=当我点击按钮。但我只想在同一页面上添加一个图像。我该怎么做呢?

您正在提交您的表单。

将输入类型由submit改为button

为避免页面刷新，请使用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>

相关文章：