Javascript（不是jquery）按钮单击，函数更改按钮调用函数的类

我知道你可以使用

 document.getElementById("ID1").setAttribute("class", "NewClass");

但是如果我想在单击按钮时将类更改为active，那么是否可以在不为按钮分配ID的情况下执行此操作？ 我也不想在这个类中更改所有按钮，我知道您也可以按类使用get元素

按钮由另一段javascript生成，看起来像

    <button class="btn" onclick="myFunction(this.innerHTML)">A</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">B</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">C</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">D</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">F</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">G</button>

任何帮助都将不胜感激。 如果你需要更多的信息，请告诉我

<script type="text/javascript">
    function a(){
        this.classList.toggle('first');
        this.classList.toggle('sec');
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseleave', a )
</script>

---

从

尝试这样的方法

html

---

这可能是你想要的

(function() {
    var buttons = document.getElementsByClassName('btn');
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault();
                this.classList.toggle('active');
            });
        }
    }
})();

您正在将单击事件处理程序附加到所有按钮

---

能否更改myFunction？？？？？而不是使用this.innerHTML只需使用它，您就可以访问单击的按钮，而不仅仅是文本。那么你就可以这样做了。setAttributeclass，NewClass；在函数中。@rajeshkakawat是的，它会在一分钟内做其他事情，只是为了得到一个值。@Brian，我会在函数中使用this.setAttributeclass，NewClass，还是使用变量中的任何内容。例如，如果是MyFunctionx，我会使用x.setAttributeclass、NewClass吗？我添加了一个答案，说明了我的意思，但这不会改变所有按钮的属性吗？如果单击，我想要它，而不是悬停，但这很有用+1.谢谢你：那真是太好了干杯：真不敢相信我竟然没想到要尝试一下！这非常有用，谢谢：我可能会继续切换按钮，所以+1也会使用任何jquery吗？不，这只是JavaScriptI。我查找了切换函数，它看起来像是一个jquery插件这是一个本机JavaScript函数，但如果您想支持较旧的浏览器或只是使用另一种切换方式，可能需要使用polyfill。另一个答案在您之前发布，因此我接受了这个答案，但我感谢您的帮助：+1

<button class="btn" onclick="myFunction(this)">A</button>


<script>
function myFunction(button) {
    var text = button.innerHTML;
    // do whatever with text that you were doing before...
    button.setAttribute("class", "active");
}
</script>

<button class="btn" onclick="myFunction(this)">A</button>

function myFunction(btn){
    btn.setAttribute("class", "NewClass");// change class

    btn.innerHTML // use your inner html here
}

(function() {
    var buttons = document.getElementsByClassName('btn');
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault();
                this.classList.toggle('active');
            });
        }
    }
})();