How to add a class without access to HTML

Question

I want to add an additional class to an input. I have no access to the HTML to change the code.

I tried the below. I don't really know JS, but have to get this done for work.

<script type="text/javascript">
    function changeClass(){
        document.getElementById("en__field_supporter_emailAddress").className += " xverify_email";
    }

    window.onload = function(){
        document.getElementsByTagName("button").addEventListener( 'click', changeClass);
    }
</script>

I want the JS to insert the "xverify_email" class into the email address input line (which has the id en__field_supporter_emailAddress and also already has a class that must remain there) so that it can call the subsequent xverify JS to work.

so what is not working? Did you debug to see where it fails? `console.log()` is helpful. — epascarello, Jul 01 '19 at 20:15
`getElementsByTagName` returns a collection, not a single element. After calling that function you should access some specific index(es) of that returned collection. — takendarkk, Jul 01 '19 at 20:16
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Jul 01 '19 at 20:17
The console says this: Uncaught TypeError: document.getElementsByTagName(...).addEventListener is not a function at window.onload — RandomPerson1, Jul 01 '19 at 20:19

score 0 · Answer 1 · answered Jul 01 '19 at 20:24

I'm assuming you have a set of buttons, so you want to bind the event click to every button in the page:

Array.from(document.querySelectorALl('button')).forEach(function(btn) {
    btn.addEventListener('click', changeClass);
});

I recommend you to embrace the attribute classList:

function changeClass() {
    document.getElementById("en__field_supporter_emailAddress").classList.add("xverify_email");
}

How to add a class without access to HTML

1 Answers1