JS: Changing value in function doesn't work

Question

I've made an which displays a arrow pointing down. The idea is that if the user clicks on this, the navigation bar will be shown. So far it works but I wanted that when the is pressed, it's value and rotation changes as well. However the value doesn't change. Can someone please help me with what i'm doing wrong. Thanks!
The screenshots:

Answer 1

There is no proper "value" Attribute for <h3> so it didn't work with dropBut.value I've done some changes in your code..

var dropBut = document.getElementById("dropDownBut");

function dropDownMenu(){
console.log("hey");
console.log(dropBut.getAttribute("value"));
    if(dropBut.getAttribute("value") === "downside"){
    dropBut.style.transform = "rotate(270deg)";
    dropBut.setAttribute("value","upside");
  }
  else if(dropBut.getAttribute("value") === "upside"){
    dropBut.style.transform = "rotate(-270deg)";
    dropBut.setAttribute("value","downside");
  }
}

dropBut.addEventListener("click",dropDownMenu);

Hope this one helps you

Answer 2

Here is something using JQuery.

$('#dropdownButton').click(function(){  
    $('#dropdownButton').attr('value','up');//set with jquery  
    if($('#dropdownButton').attr('value')==='up')//compare value   
    {
          alert("UP!");   
    }   
    if($('#dropdownButton').attr('value')==='down')//compare value   
    {
         alert("DOWN!");   
    } 
    });