How to change href and innertext at the same time?

user_13689497 0
Viewed 488

So I am doing this task where I am supposed to class replace the anchor's target address (href attribute) and the text inside the tag with the homepage address of the contact. my html code

    clonedNode.querySelector('a[href="#"]').setAttribute('href', inputHomepage.value)
    clonedNode.querySelector(".homepage").innerHTML = inputHomepage.value    

    
})

So, basically I will enter my Name, email address and contact in the form. When I hit the save button, It will show me my name,email and contact address. It views name and email fine but it doesn't view the contact address properly. e.g if you type google.com, it will just show it in plain text but it won't redirect it to gmail.com. also if I comment out the line clonedNode.querySelector(".homepage").innerHTML = inputHomepage.value , it will redirect me to the desired webpage, but won't show me the contact address in text. Is there any fix?

html javascript
2 Answers

first change inner html then set href

var inp = document.getElementsByTagName("input");
var form = document.getElementById("form");


form.addEventListener("submit",function(event){
    event.preventDefault();
    var node = document.getElementById('contact-template')
    var clonedNode = node.content.cloneNode(true)
    
    var inputName = document.querySelector("#input-name")
    var inputEmail = document.querySelector("#input-email")
    var inputHomepage = document.querySelector("#input-homepage")

    clonedNode.querySelector("h2").innerHTML = inputName.value
    clonedNode.querySelector(".email").innerHTML = inputEmail.value
    clonedNode.querySelector('.homepage a').innerHTML = inputHomepage.value   
    clonedNode.querySelector('a[href="#"]').setAttribute('href', inputHomepage.value)
 

    document.getElementById('contacts').appendChild(clonedNode)
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Round 1: Task 1</title>
  </head>
  <body>
    <h1>Round 1: Task 1</h1>

    <form id="form">
      <input type="text" name="name" placeholder="Name" id="input-name" required>
      <input type="email" name="email" placeholder="Email" id="input-email" required>
      <input type="url" name="homepage" placeholder="Homepage" id="input-homepage" required>
      <button type="submit" id="submit">Save</button>
    </form>

    <div id="contacts"></div>
    <p><ul><li>First</li><li>Second</li></ul></p>
    <p>Some <span>text</span></p>
    <template id="contact-template">
      <div class="contact">
        <h2>Name</h2>
        <p class="email">email@example.com</p>
        <p class="homepage"><a href="#">Homepage URL</a></p>
      </div>
    </template>
    <script src="template.js"></script>
  </body>
</html>

user_64237410

I think the problem is in these 2 lines:

clonedNode.querySelector('a[href="#"]').setAttribute('href', inputHomepage.value)
clonedNode.querySelector(".homepage").innerHTML = inputHomepage.value

In the 1st line you set the anchor href value it is correct, but the next line you overwrite the .homepage with the inputHomepage.value

user_60874220
Related