Question

我创建了一个表单，当我点击“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>

这是工作但只有一半......而且只是在几秒钟之内...... 我不明白为什么

此外我认为当我点击按钮时我会刷新页面。在我的网址中：/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>

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

2 个答案: