如何以点表示法引用 HTML object 'name' 属性 - JavaScript

Question

So, I have a situation where the JavaScript code is creating HTML Elements (in this case it is an <object> ). The name attribute is the only reference that I can use to call for it.

To make a long story short, I need to call it to add and remove classList assignments.

Here is my html (yes, I understand the poor practice behind putting <object> s in <ul> s, but this isn't permanent):

<div id="wSpace">
            <ul id="fList"></ul>
            <div id="counter"></div>
            <div id="viewer">
            </div>
        </div>

And here's the js... previous to these functions, objects were created, and now there's a list of them floating in <ul id="fList"> :

var list = document.querySelector('ul');
list.addEventListener('click', function (ev) {
    if (ev.target.tagName === 'OBJECT') {
        ev.target.classList.toggle('red');
    }
    if (ev.target.classList.contains('red')) {
        ev.target.setAttribute("name", "c");
    } else {
        ev.target.setAttribute("name", "d");
    }
}, false);

function completed() {
    var t = document.getElementById("completed");
    if (t.value == "True") {
        t.value = "False";
        c.classList.add('green');
    } else if (t.value == "False") {
        t.value = "True";
        c.classList.remove('green');
    }
}

My problem lies in the 'if' statements inside completed() . I'm trying to call <object name="c"> with dot notation (as if you would with an 'id'), but it is not working in the slightest. I know there's a million better ways to do this, but this is only an alpha-concept type deal... I just need it running for the sake of demonstrating the idea of the final project. I'd appreciate thoughts.

Answer 1

Object tags are form controls and all form interfaces and APIs apply to them.

 const ui = document.forms[0]; const io = ui.elements; const allA = [...io.A]; const b = io.B; allA.forEach(o => o.classList.toggle('red')); b.style.fontSize = '5rem';

 .red { color: red }

 <form> <object name='A'>A</object> <object name='A' class='red'>A</object> <object name='A'>A</object> <object name='B'>B</object> </form>