I am trying to learn web designing and when trying to add class into it through java script ran into trouble.

html code:

<ul>
    <li onclick="switchChannel(channel1)>
        #Channel1
    </li>
    <li onclick="switchChannel(channel2) class="selected">
        #Channel2
    </li>
    <li onclick="switchChannel(channel3)>
        #Channel3
    </li>

css code:

.selected{
    color:blue;
    border-left:4px solid blue;
}

javascript:script.js

function switchChannel(channelName) {
    }

javascript:channel.js

    var channel1={
        name:"Channel1",
        createdOn:new Date("April 1, 2016"),
        starred:false
};

     var channel2={
            name:"Channel1",
            createdOn:new Date("April 1, 2016"),
            starred:false
    };

I want to be able to click a channel1 from the list and apply .selected class to it but when channel2 is clicked remove .selected from channel1 and apply it to channel2 and so on...

If I have messed up anything else in the code please feel free to ment on it.

I am trying to learn web designing and when trying to add class into it through java script ran into trouble.

html code:

<ul>
    <li onclick="switchChannel(channel1)>
        #Channel1
    </li>
    <li onclick="switchChannel(channel2) class="selected">
        #Channel2
    </li>
    <li onclick="switchChannel(channel3)>
        #Channel3
    </li>

css code:

.selected{
    color:blue;
    border-left:4px solid blue;
}

javascript:script.js

function switchChannel(channelName) {
    }

javascript:channel.js

    var channel1={
        name:"Channel1",
        createdOn:new Date("April 1, 2016"),
        starred:false
};

     var channel2={
            name:"Channel1",
            createdOn:new Date("April 1, 2016"),
            starred:false
    };

I want to be able to click a channel1 from the list and apply .selected class to it but when channel2 is clicked remove .selected from channel1 and apply it to channel2 and so on...

If I have messed up anything else in the code please feel free to ment on it.

• javascript
• html
• css

• 3 why is the script.js empty? – Sv443 Commented Oct 24, 2018 at 16:15
• 3 @Sv443 that's the part you are supposed to write for him ;) – Adam H Commented Oct 24, 2018 at 16:15
• 2 why are you missing "? – Roko C. Buljan Commented Oct 24, 2018 at 16:16
• w3schools./howto/howto_js_add_class.asp – Zak Commented Oct 24, 2018 at 16:17
• I use the event.target of the click event to get the <li> item, that was clicked. So if you save the element that is clicked every time, you can remove the class from that element, before you overwrite that variable with the new target you just highlighted. PS: the name of your second channel is also Channel1, so you ahve duplicate names. – Shilly Commented Oct 24, 2018 at 16:17

4 Answers 4

There are a lot of answers here but they don't seem to be addressing the actual issue. Here is a quick example using vanilla JavaScript to acplish what you are asking for.

function switchChannel(el){
  // find all the elements in your channel list and loop over them
  Array.prototype.slice.call(document.querySelectorAll('ul[data-tag="channelList"] li')).forEach(function(element){
    // remove the selected class
    element.classList.remove('selected');
  });
  // add the selected class to the element that was clicked
  el.classList.add('selected');
}

.selected{
    color:blue;
    border-left:4px solid blue;
}

<!-- Add the data-tag attribute to this list so you can find it easily -->
<ul data-tag="channelList">
    <li onclick="switchChannel(this)">Channel 1</li>
    <li onclick="switchChannel(this)" class="selected">Channel 2</li>
    <li onclick="switchChannel(this)">Channel 3</li>
</ul>

You should use getElementsByIdand getElementsbyTagNameto manipulate the DOM:

function selectChannel(channelNumber) {
  let listItems = document.getElementById("items").getElementsByTagName("li");
  var length = listItems.length;
  for (var i = 0; i < length; i++) {
    listItems[i].className = i+1 == channelNumber ? "selected" : "";
  }
}

.selected {
  color: blue;
  border-left: 4px solid blue;
}

<ul id="items">
  <li onclick="selectChannel(1)">#channel1</li>
  <li onclick="selectChannel(2)" class="selected">#channel2</li>
  <li onclick="selectChannel(3)">#channel3</li>
</ul>

This solution uses jQuery but I thought this might help you out. A CodePen showing a version of this in action can be seen here.

jQuery(document).ready(function(){
    jQuery('li').click(function(event){
        //remove all pre-existing active classes
        jQuery('.selected').removeClass('selected');

        //add the active class to the link we clicked
        jQuery(this).addClass('selected');     
        event.preventDefault();
    });
});

I solved it. And I thank you every for your help.

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');