Change HTML tag with Javascript

Question

I asking the user to select given emails, and getting them with javascript from a form on click.

If I have an href like

<a href="#" id="myHref" emails="whatever@example.com"></a>

And I have a bunch of checkboxes for every email obtained from the database

Using javascript, how can I add this value into the emails="" tag by clicking the checkbox?

Possible duplicate of [JavaScript: how to get value of text input field?](http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field) — Kewin Dousse, May 21 '17 at 20:06
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute ... `document.getElementById('myHref').setAttribute('email', value)` .. or something like that — tereško, May 21 '17 at 20:06
I would love to give you a "ready-to-go" solution, but I would need the checkbox HTML. Thanks! — Chris Happy, May 21 '17 at 20:14

score 0 · Accepted Answer · answered May 21 '17 at 20:17

You can listen to change event for each checkbox to keep track of checked emails:

var boxes = document.querySelectorAll('input[name=email]');
var link = document.getElementById('myHref');
var emails = [];

boxes.forEach(box => box.addEventListener('change', function(e) {
  var v = e.target.value;
  if (e.target.checked === true) {
    if (!emails.includes(v)) emails.push(v);
  } else {
    emails.splice(emails.indexOf(v), 1);
  };
  link.setAttribute('emails', emails.join(', '));
  console.log(link.attributes.emails.value)
}))

<input type="checkbox" value="1@d.com" name="email">
<input type="checkbox" value="2@d.com" name="email">
<input type="checkbox" value="3@d.com" name="email">

<a href="#" id="myHref" emails="whatever@example.com">Link</a>

score 0 · Answer 2 · answered May 21 '17 at 20:34

You can set a click event on the checkbox.

            var arr_el = document.getElementsByClassName('check-boxes');
            for(var i = 0; i < arr_el.length; i++){
                arr_el[i].addEventListener('click', function(){
                    var el = document.getElementById('myHref');
                    var emails = el.getAttribute('emails');
                    var userSelectedEmail = this.value;
                    if(this.checked){
                        el.setAttribute('emails', emails + ';' + userSelectedEmail);
                    } else {
                        // debugger;
                        emails = emails.split(';');
                        var index = emails.indexOf(userSelectedEmail);
                        emails.splice(index, 1);
                        el.setAttribute('emails', emails.join(';'));
                    }
                    document.getElementById('emails').innerText = el.getAttribute('emails');
                });
            }

<html>
    <head>

    </head>
    <body>
        <a id="myHref" href="#" emails="test@email.com">Link</a>
        <br>
        <input class="check-boxes" type="checkbox" value="email2@gmail.com">email2@gmail.com<br>
        <input class="check-boxes" type="checkbox" value="email3@gmail.com">email3@gmail.com<br>
        <input class="check-boxes" type="checkbox" value="email4@gmail.com">email4@gmail.com<br>
        <input class="check-boxes" type="checkbox" value="email5@gmail.com">email5@gmail.com<br>

        <p id="emails"></p>
    </body>
</html>

Change HTML tag with Javascript

2 Answers2