Actionbuttons work after the second time they are pressed in a shiny app-CodePudding

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 www inside my working directory. And they are named like:

"1betA_green.jpg"
"1betA_green.jpg"

Default case when the user opens the app.

"2betA_green.jpg"
"2betA_green.jpg"

for 1st time the user press any actionButton().

etc..

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.

library(shiny)
  library(shinyjs)

  ui <- fluidPage(
    id="main",
    title="Risk and ambiguity",
    useShinyjs(),

    #when you press on of the 3 actionbuttons for first-example
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("50%", "50%"), column(6,uiOutput("image1")), column(6,uiOutput("image2"))
                  # column(12,img(src="1betA_green.jpg", height="80%", width="80%", align="left")),
                  # column(12,img(src="1betB_green.jpg", height="80%", width="80%", align="right"))
                  ))),

    #when you press on of the 3 actionbuttons for second time-example
    #fluidRow(wellPanel(
    # splitLayout(cellWidths = c("50%", "50%"),
    #            column(12,img(src="2betA_green.jpg", height="80%", width="80%", align="left")),
    #           column(12,img(src="2betB_green.jpg", height="80%", width="80%", align="right"))))),

    ####
    fluidRow(wellPanel(
      splitLayout(cellWidths = c("33%", "33%", "33%"),
                  #uiOutput("myactions")
                  column(12,align="center",actionButton("action11", label = "Je choisis option A")),
                  column(12,align="center",actionButton("action12", label = "Je choisis le sac avec A et B")),
                  column(12,align="center",actionButton("action13", label = "Je choisis option B"))
      )))
  )

  server <- function(input, output, session){
    rv <- reactiveValues(img11=NULL, img12=NULL)

    myimage1 <- c("YBS.png", "mouse.png","EC.jpg", "man_log.png", "cube.png", "hotdog.png")
    myimage2 <- c("man_log.png", "cube.png", "hotdog.png", "YBS.png", "mouse.png","EC.jpg")

    output$image1 <- renderUI({tags$img(src=rv$img11, height = "50px")})
    output$image2 <- renderUI({tags$img(src=rv$img12, height = "50px")})
    
    observe({
      nclick <- 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>0 & nclick<7){
        rv$img11 <- myimage1[nclick]
        rv$img12 <- myimage2[nclick]
      }else{
        rv$img11 <- NULL
        rv$img12 <- NULL
      }
    })
  }

  shinyApp(ui = ui, server = server)

CodePudding user response：

Perhaps you are looking for this

  if (nclick==0) { ###  initial display
    rv$img11=myimage1[1]
    rv$img12=myimage2[1]  
  }else if (nclick>0 & nclick<6){
    rv$img11 <- myimage1[nclick 1]
    rv$img12 <- myimage2[nclick 1]
  }else{
    rv$img11 <- NULL
    rv$img12 <- NULL
  }