title: Actionbuttons work after the second time they are pressed in a shiny app
body: <p>I have the shiny app below with 3 actionButtons. I want every time a user presses any of them a different pair of images should be displayed. The images are already saved  in a folder named <code>www</code> inside my working directory.  And they are named like:</p>
  <pre><code>&quot;1betA_green.jpg&quot;
  &quot;1betA_green.jpg&quot;
  </code></pre>
  <p>Default case when the user opens the app.</p>
  <pre><code>&quot;2betA_green.jpg&quot;
  &quot;2betA_green.jpg&quot;
  </code></pre>
  <p>for 1st time the user press any <code>actionButton()</code>.</p>
  <p>etc..</p>
  <p>This can happen up to 6 times then it stops. The issue is that when I open the app the first time that I press an actionbutton it does move instantly to the second pair of images but I have to press it again.</p>
  <pre><code>library(shiny)
    library(shinyjs)
  
    ui &lt;- fluidPage(
      id=&quot;main&quot;,
      title=&quot;Risk and ambiguity&quot;,
      useShinyjs(),
  
      #when you press on of the 3 actionbuttons for first-example
      fluidRow(wellPanel(
        splitLayout(cellWidths = c(&quot;50%&quot;, &quot;50%&quot;), column(6,uiOutput(&quot;image1&quot;)), column(6,uiOutput(&quot;image2&quot;))
                    # column(12,img(src=&quot;1betA_green.jpg&quot;, height=&quot;80%&quot;, width=&quot;80%&quot;, align=&quot;left&quot;)),
                    # column(12,img(src=&quot;1betB_green.jpg&quot;, height=&quot;80%&quot;, width=&quot;80%&quot;, align=&quot;right&quot;))
                    ))),
  
      #when you press on of the 3 actionbuttons for second time-example
      #fluidRow(wellPanel(
      # splitLayout(cellWidths = c(&quot;50%&quot;, &quot;50%&quot;),
      #            column(12,img(src=&quot;2betA_green.jpg&quot;, height=&quot;80%&quot;, width=&quot;80%&quot;, align=&quot;left&quot;)),
      #           column(12,img(src=&quot;2betB_green.jpg&quot;, height=&quot;80%&quot;, width=&quot;80%&quot;, align=&quot;right&quot;))))),
  
      ####
      fluidRow(wellPanel(
        splitLayout(cellWidths = c(&quot;33%&quot;, &quot;33%&quot;, &quot;33%&quot;),
                    #uiOutput(&quot;myactions&quot;)
                    column(12,align=&quot;center&quot;,actionButton(&quot;action11&quot;, label = &quot;Je choisis option A&quot;)),
                    column(12,align=&quot;center&quot;,actionButton(&quot;action12&quot;, label = &quot;Je choisis le sac avec A et B&quot;)),
                    column(12,align=&quot;center&quot;,actionButton(&quot;action13&quot;, label = &quot;Je choisis option B&quot;))
        )))
    )
  
    server &lt;- function(input, output, session){
      rv &lt;- reactiveValues(img11=NULL, img12=NULL)
  
      myimage1 &lt;- c(&quot;YBS.png&quot;, &quot;mouse.png&quot;,&quot;EC.jpg&quot;, &quot;man_log.png&quot;, &quot;cube.png&quot;, &quot;hotdog.png&quot;)
      myimage2 &lt;- c(&quot;man_log.png&quot;, &quot;cube.png&quot;, &quot;hotdog.png&quot;, &quot;YBS.png&quot;, &quot;mouse.png&quot;,&quot;EC.jpg&quot;)
  
      output$image1 &lt;- renderUI({tags$img(src=rv$img11, height = &quot;50px&quot;)})
      output$image2 &lt;- renderUI({tags$img(src=rv$img12, height = &quot;50px&quot;)})
      
      observe({
        nclick &lt;- sum(as.numeric(input$action11) + as.numeric(input$action12) + as.numeric(input$action13))
       
        if (nclick==0) { ###  initial display
          rv$img11=myimage1[1]
          rv$img12=myimage2[1]  
        }else if (nclick&gt;0 &amp; nclick&lt;7){
          rv$img11 &lt;- myimage1[nclick]
          rv$img12 &lt;- myimage2[nclick]
        }else{
          rv$img11 &lt;- NULL
          rv$img12 &lt;- NULL
        }
      })
    }
  
    shinyApp(ui = ui, server = server)
  </code></pre>