Edit functionality for the link - UI

Question

I have an image , on click of the image, it directs to a particular link , say "Google.com" as of now

The code as of now is as follows :

  <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>

Now , I wanted to an edit functionality below the images. When I click on the edit button or symbol , it should give me the option to update the href location where the page should head to. For example : If I click on edit option, I should be able to change the href from Google.com to yahoo.com if needed... And when I click on the image next time, it should direct me to the updated link .

Any solutions or help would be really appreciated ?

Answer 1

please check demo :

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

Answer 2

To achieve expected result, use below option

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