How to add event listeners to the label of an input field on blur?-CodePudding

The input field is to contain a url. On blur, this event will update the input label's href,since this is a clickable label and should guide the user to a new page whose url has just been entered.

When the card containing this input is built, this function gets run. It adds event listeners to other pieces of the card, but this one doesn't seem to work.

function addEventListeners() {
  const publishedPostInputs = document.querySelectorAll('.form-group.a input.published-link-input');
  publishedPostInputs.forEach(input => {
    input.addEventListener('blur', function() {
      const link = this.value;
      let plLabel = this.parentNode.parent;
      plLabel.setAttribute('href', link);
    });
  });
}

<div >
  <a href="https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg" target="_blank">
    <label for="publishedPostLink">Published Link:</label>
  </a>
  <input type="text"  name="published-link" value="https://posts.gle/ZpUe9p">
</div>

<!-- IMAGES TO TRY: 
https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg
https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg
-->

CodePudding user response：

Issues with your code:

the querySelectorAll() did not match anything because .form-group.a does not exist, so remove it
addEventListeners() is not called, only defined
your <a> tag is not the parent, but a sibling, so go to parent and find the tag

Fixed code:

function addEventListeners() {
  const publishedPostInputs = document.querySelectorAll('input.published-link-input');
  publishedPostInputs.forEach(input => {
    input.addEventListener('blur', function() {
      const link = this.value;
      const elem = this.parentNode.getElementsByTagName('a')[0];
      elem.setAttribute('href', link);
    });
  });
}
addEventListeners();

<div >
  <a href="https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg" target="_blank">
    <label for="publishedPostLink">Published Link:</label>
  </a>
  <input type="text"  name="published-link" value="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg">
</div>

<!-- IMAGES TO TRY: 
https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg
https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg
-->

CodePudding user response：

A better way to do it would be to listen for live change events from the input. That way if the value changes it will keep updating the link.

Note: I have edited the answer to better suit the needs, I did not understood the requirement was with multiple fields, this one works better.

Here is the code:

index.html

<!DOCTYPE html>
<html>

<body>
    <div >
        <a href="https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg" target="_blank">
            <label for="publishedPostLink">Published Link:</label>
        </a>
        <input type="text"  name="published-link"
            value="https://posts.gle/ZpUe9p">
    </div>

    <!-- IMAGES TO TRY: 
      https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg
      https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg
      -->

    <script src="./index.js"></script>
</body>

</html>

index.js

// Find inputs
const publishedPostInputs = document.querySelectorAll('input.published-link-input');
// Loop through inputs
publishedPostInputs.forEach(function (input) {
    // Add event listener for input field change
    input.addEventListener('change', function (e) {
        // Get the link from the same parent element
        const linkLabel = e.target.parentElement.querySelector('a');
        // Set the attribute href to the value of the input field
        linkLabel.setAttribute('href', e.target.value);
    });
});