我有一张图片，点击图片后，它会指向一个特定的链接，比如"Google.com"，现在是
截至目前的代码如下：
<div class = "gallery">
<ul>
<li>
<a target = "_blank " href="www.google.com"> <p>Google</p> <img src="images/1.jpg" alt ="" > </a>
</li>
</ul>
</div>
现在，我想在图片下面添加一个编辑功能。当我单击编辑按钮或符号时，它应该为我提供更新页面应指向的href位置的选项。例如：如果我点击编辑选项，如果需要，我应该可以将href从Google.com更改为yahoo.com。。。当我下次点击图片时，它会引导我进入更新的链接。
如果有任何解决方案或帮助，我们将不胜感激？
请查看演示：
https://jsfiddle.net/077vc41d/1/
<input id="urlInput" type="text" value ="http://www.google.com"/>
<button id="editButton">Edit</button>
<div class = "gallery">
<ul>
<li>
<a id="linkTag" target = "_blank " href="http://www.google.com"> <p>Google</p> <img src="https://0.s3.envato.com/files/148768949/Prev%20big.png" alt ="" > </a>
</li>
</ul>
</div>
Javascript：
document.getElementById("editButton").addEventListener("click",changeURL);
function changeURL(e){
var input = document.getElementById("urlInput");
var link = document.getElementById("linkTag");
linkTag.setAttribute("href",input.value);
}
要实现预期结果，请使用以下选项
HTML:
<div class="gallery">
<ul>
<li>
<a target="_blank " id="new" href="http://www.google.com">
<p>Google</p> <img src="http://www.w3schools.com/css/img_fjords.jpg" alt=""> </a>
</li>
</ul>
</div>
Change URL<input type="text" id="newURL">
<button onclick="update()">Change</button>
JS:
function update() {
var x = document.getElementById("newURL").value;
document.getElementById("new").href = x;
}
http://codepen.io/nagasai/pen/akqxWE