Simple if else onclick then do

Question

How do I make it so if yes button clicked change colour  Is using  onclick the best option for this  Am I doing it the optimal way    Thanks   html    lt body gt   lt div id  box  gt  lt  div gt   lt button id  yes  gt yes lt  button gt   lt button id  no  gt no lt  button gt   lt script src  js script js  gt  lt  script gt   lt  body gt    css    box       width  200px      height  200px      background-color  red      js   function Choice          var box   document getElementById  box        var yes   document getElementById  yes        var no   document getElementById  no         if  yes clicked    true            box style backgroundColor    red         else if  no clicked    true            box style backgroundColor    green         else           box style backgroundColor    purple              Choice

User · Answer

I did it that way and I like it better  but it can be optimized  right      Obtengo los botones y la caja de contenido var home   document getElementById  home    var about   document getElementById  about    var service   document getElementById  service    var contact   document getElementById  contact    var content   document querySelector  section     function botonPress e     console log e getAttribute  id       var screen   e getAttribute  id      switch screen       case  home            cambiar fondo       content style backgroundColor    black         break      case  about            cambiar fondo       content style backgroundColor    blue         break      case  service            cambiar fondo       content style backgroundColor    green         break      case  contact            cambiar fondo       content style backgroundColor    red         break

User · Answer

You should use onclick method because the function run once when the page is loaded and no button will be clicked then   So you have to add an even which run every time the user press any key to add the changes to the div background   So the function should be something like this   htmlelement onclick     function          Do the changes      So your code has to look something like this      var box   document getElementById  box    var yes   document getElementById  yes    var no   document getElementById  no     yes onclick   function        box style backgroundColor    red      no onclick   function        box style backgroundColor    green       This is meaning that when  yes button is clicked the color of the div is red and when the  no button is clicked the background is green    Here is a Jsfiddle

User · Answer

You may use jQuery in it like      yesh   click function              HERE GOES THE FUNCTION            Besides jQuery is easy to use   You can make changes in colors etc using simple jQUery or Javascript

User · Answer

The preferred modern method is to use addEventListener either by adding the event listener direct to the element or to a parent of the elements  delegated     An example  using delegated events  might be   x000D   x000D  var box   document getElementById  box    x000D   x000D  document getElementById  buttons   addEventListener  click   function evt    x000D    var target   evt target  x000D    if  target id      yes     x000D      box style backgroundColor    red   x000D      else if  target id      no     x000D      box style backgroundColor    green   x000D      else   x000D      box style backgroundColor    purple   x000D      x000D     false   x000D   box   x000D    width  200px  x000D    height  200px  x000D    background-color  red  x000D    x000D   buttons   x000D    margin-top  50px  x000D    x000D   lt div id  box  gt  lt  div gt  x000D   lt div id  buttons  gt  x000D     lt button id  yes  gt yes lt  button gt  x000D     lt button id  no  gt no lt  button gt  x000D     lt p gt Click one of the buttons above  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

you call function on page load time but not call on button event  you will need to call function onclick event  you may add event inline element style or event bining   x000D   x000D   function Choice elem    x000D     var box   document getElementById  box    x000D     if  elem id     no     x000D       box style backgroundColor    red   x000D       else if  elem id     yes     x000D       box style backgroundColor    green   x000D       else   x000D       box style backgroundColor    purple   x000D        x000D      x000D   lt div id  box  gt dd lt  div gt  x000D   lt button id  yes  onclick  Choice this    gt yes lt  button gt  x000D   lt button id  no  onclick  Choice this    gt no lt  button gt  x000D   lt button id  other  onclick  Choice this    gt other lt  button gt  x000D   x000D   x000D    or event binding    x000D   x000D  window onload   function     x000D    var box   document getElementById  box    x000D    document getElementById  yes   onclick   function     x000D      box style backgroundColor    red   x000D      x000D    document getElementById  no   onclick   function     x000D      box style backgroundColor    green   x000D      x000D    x000D   lt div id  box  gt dd lt  div gt  x000D   lt button id  yes  gt yes lt  button gt  x000D   lt button id  no  gt no lt  button gt  x000D   x000D   x000D

[javascript] Simple if else onclick then do?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to if-statement

Examples related to onclick