Изменение класса Span не работает

Question

У меня есть следующий код на веб-странице и по неизвестной мне причине он не работает, у меня есть 2 метода, чтобы попытаться изменить атрибут класса spans, но он не работает, может кто-нибудь указать, где я ошибся?:)

<script language="javascript">
    function ChangeClass()
    {
        alert("Clicked!");
        document.getElementById("Search").className = "non-activeTab";
        alert("Changed class!");
        //does not work
    }

    window.onload = function()
    {
        document.getElementById("Search").addEventListener('click' , ChangeClass );
        var elm = document.getElementById("Search").className;
        alert("LOADED PAGE " + elm);
        //this works
    }
    function someFunction(abc,elm) {
        alert(abc + "/" + elm);
        //does not work
    }
</script>

<div class="tabs" id="tabs">
    <div class="tabOutline" id="outline" >
        <span class="activeTab" id="Search" onclick="someFunction('two',this.className)">
            Search
        </span>
    </div>
</div>

Answer 1

Ваш код работает, но не так, как вы ожидаете. Похоже на то onclick выполняется первым, что означает, что он показывает вам className до изменения. На самом деле он меняется, но вы не видите его, пока не нажмете снова.

Это хороший пример того, почему плохой идеей является использование как Eventlistener, так и onclick атрибут в том же контексте. Порядок исполнения неясен.

Чтобы добиться того же в меньшем количестве кода, вы можете просто сделать:

<span class="active" onclick="this.className='inactive'">...</span>

или же:

<script>
  onload = function () {
    document.getElementById('search').addEventListener('click', function (e) {
      e.target.className = 'inactive';
    });
  };
</script>
<span id="search" class="active">...</span>

Вы можете легко проверить такие вещи, используя CSS:

<style>
  .active { color: red; }
  .inactive { color: blue; }
</style>