javascript - 链接的编辑功能 - UI

Question

我有一张图片，点击图片，它指向一个特定的链接，现在说“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...当我下次点击图片时，它应该会引导我到更新的链接。

真的很感激任何解决方案或帮助吗？

Answer 1

请检查演示:

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);
}