I am trying to write a function which sets the style properties of html element

Question

So the problem I'm having is that the console is saying that display is undefined when editStyle(list, display, "list-item"); should return:

function(){
    if(list[0]===undefined) {
        list.style.display="list-item"
    }
    else {
        for(var i=0; i<list.length; i++) {
            list[i].style.display="list-item"
        }
    }
}

The code:

var title=document.getElementsByClassName('title');
    var list=document.getElementsByClassName('list');
    var test=document.getElementById("testText");
    function editStyle(element, prop, newVal){
        //returns a function which changes the elements prop to newVal
    return function(){if(element[0]===undefined){element.style.prop=newVal;}
    //should check if prop is a list of elements or a single element                                                
    else {for(var i=0; i<element.length; i++){
    element[i].style.prop=newVal;}
    }};
    };
    function onEvent(element, event, action){
      if(element[0]==undefined){  element.event=action;}
      else{for(var i=0; i<element.length; i++){
          element[i].event=action;
      }}
    }
    onEvent(title, onmouseover, editStyle(list, display,"list-item"));
    //should set the title.onmouseover event to equal the function out put of editStyle 
    // which should change the list.style.display value to "list-item"

Here is the working code with the help of the brilliant commentators:

function editStyle(element, prop, newVal){
    //returns a function which changes the elements prop to newVal
return function(){if(element[0]===undefined){element.style[prop]=newVal;}
//should check if prop is a list of elements or a single element                                                
else {for(var i=0; i<element.length; i++){
element[i].style[prop]=newVal;}
}};
};
function onEvent(element, event, action){
  if(element[0]==undefined){  element.event=action;}
  else{for(var i=0; i<element.length; i++){
      element[i][event]=action;
  }}
}
onEvent(title, "onmouseover", editStyle(list, "display","list-item"));
//should set the title.onmouseover event to equal the function out put of editStyle 
// which should change the list.style.display value to "list-item"

`onEvent(title, onmouseover, editStyle(list, display,"list-item"))` — `onmouseover`, `title` and `display` are indeed not defined. Are those supposed to be variable names or strings? Assuming strings, things like `element.style.prop` are incorrect; that should be `element.style[prop]`. Please see [Dynamically access object property using variable](http://stackoverflow.com/q/4244896/4642212). — Sebastian Simon, Mar 21 '17 at 18:15
Please to try format your code in a better manner. And `display` is not defined. What is display supposed to be referring to? — zlwaterfield, Mar 21 '17 at 18:15
You need to be passing strings for some of your function parameters, otherwise you're defining uninitialized variables with a value of `undefined` and passing that into the function, i.e. the following params should be strings `display`, `onmouseover`. — hungerstar, Mar 21 '17 at 18:17

I am trying to write a function which sets the style properties of html element

0 Answers0