在wordpress中通过自定义JS单击后更改切换的背景颜色

Question

I am currently trying to add a custom JS function (via the Live Code Editor Plugin) to my wordpress website. The goal is to change the background colour of a toggle after click (ie from red -> green). I have tried this function but although the selector works for CSS, the JS function is not working:

CSS:

\\23 toggle-id-1 { background-color: red; }

JS:

var \23 toggle-id-1 = document.getElementById("\23 toggle-id-1");

\\23 toggle-id-1.onclick = function(){ \\23 toggle-id-1.style.backgroundColor = "green"; }

In JSFiddle this worked without any problems, is there anything different for this plugin?

Thank you!

Answer 1

jQuery solution:

  $("#toggle-id-1").click(function () { $(this).toggleClass("green"); }); 

  #toggle-id-1 { background-color: red; height: 100px; width: 100px; } #toggle-id-1.green { background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="toggle-id-1" class=""></div> 

Answer 2

You can't have spaces in variable names. Name your variable something else.