html - Change icon with javascript - Stack Overflow

In my foray into web development I have found a new problem, I need to change the icon for another one when I click on it. I have an idea of a function in javascript that sends the id of the icon and with the obtain the element, after obtaining element I hope to change keyboard_arrow_up by keyboard_arrow_down. However that is the part that is not performed, how do I get the value keyboard_arrow_up?

function change(iconID) {
    var item = document.getElementById(iconID);
    if (item) {}
}

<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>

In my foray into web development I have found a new problem, I need to change the icon for another one when I click on it. I have an idea of a function in javascript that sends the id of the icon and with the obtain the element, after obtaining element I hope to change keyboard_arrow_up by keyboard_arrow_down. However that is the part that is not performed, how do I get the value keyboard_arrow_up?

function change(iconID) {
    var item = document.getElementById(iconID);
    if (item) {}
}

<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>

• javascript
• html

Share Improve this question Follow edited Jun 16, 2019 at 12:40 Masoud Keshavarz 2,24499 gold badges4040 silver badges4949 bronze badges asked Dec 4, 2017 at 2:43 trok brktrok brk 16922 gold badges33 silver badges1313 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

This is the temporary solution, I had to change the icons of google design material by the fontawesome icons. However, I will continue investigating.

function change (iconID){
  if(document.getElementById(iconID).className=="fa fa-chevron-up"){
    document.getElementById(iconID).className = "fa fa-chevron-down";
  }else{
    document.getElementById(iconID).className = "fa fa-chevron-up";
  }
}

<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true">

Sounds like , you need this kind of function

function changeIcon(classname or id) {
    $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down");
}

Note : the icons in above solution are copied from internet , please use your desire icons in there.

Remember Icons are just CSS class, so the function should change the class for another on the javascript function.

function change(iconID) {
var element = document.getElementById(iconID);

if (element.classList.contains("keyboard_arrow_up")) {

    element.classList.add("keyboard_arrow_down")

  } else {

    element.classList.add("keyboard_arrow_up")
  }
}

You can change innerText as follows:

 document.addEventListener("DOMContentLoaded", function() {

    let change = document.querySelector("#icon");

   change.addEventListener('click' ,function () {
       let item = document.querySelector("#icon");

       if(this.innerText == 'keyboard_arrow_down'){
            item.innerText = "keyboard_arrow_up";

        }else{   
            item.innerText = "keyboard_arrow_down";

        }

    })
});

and the html:

<i id="icon" class="material-icons">keyboard_arrow_up</i>

function change(iconID) {
    var item = document.getElementById(iconID);
    if (item) {}
}

<i id="icon1" onclick="change('icon1')" class="material-icons">keyboard_arrow_up</i>

snap pans