2016-08-10 69 views
0

我已經創建了一個窗體,並且當我點擊按鈕「測試儀」時想插入圖像。 這是我的代碼:如何在按鈕上單擊圖像插入

<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=當我點擊按鈕。 但我只想在同一頁面上添加圖像。我怎樣才能做到這一點?

+1

'' – Rayon

+0

好的,謝謝你rayon it'w工作! – wxcvbn

回答

0

您提交表單。

將輸入類型從submit更改爲button

+0

它的工作感謝你razzka!但是提交和按鈕有什麼不同? – wxcvbn

+0

提交操作將您的表單(包含所有輸入數據)發送到服務器,並用服務器的響應重新加載此頁面。通常,您必須在服務器端處理提交,並且重新加載頁面包含一些新數據。如果(出於某種原因)您想要提交表單,但不刷新頁面,請將'onclick =「返回false」'添加到標記。 – Razzka

0

爲了避免頁面刷新使用輸入類型buttonsubmit

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>