Change text in a button - without redraw page?

[bugs]

I think this is an HTML question...

With most HTML items e.g textbox, slider, meter etc a change of the variable in code changes the text on the web page.
I have a busy web page and a single button where I want to change its caption when pressed e.g. START to STOP or RUN to PAUSE etc.
Using a variable in code e.g. butcaption$ I can change this and it is reflected when the whole webpage is re-drawn - button$(butcaption$,dobut,"but1") .
Is there a work round where this can be changed just with the refresh command as redrawing the whole page each time causes an annoying flicker with the CLS.
I know I can change the colour with e.g. CSS cssid$("but1", "background-color: red;") .

[Zim]

Hi bugs

This may not be applicable, but the "replace" command may be of some use.
I used it to change the list box prompt.

l$ = listbox$(Pole$,"4, 5, 6, 8, 10, 12, 20", "lbox1")
l$ = replace$(l$, "Choose here", "?")
html l$

[bugs]

Hi Zim,

Thanks for the reply. I think I have used replace$ in the past - will look back through my old progs to see if it would help here.

[Electroguard]

Javascript can update just the specified items in the webpage.
My generic EasyNet program allows for an optional clock and temperature displays amongst other things.
The web: subroutine can style the initialial webpage with webfonts and other stuff, but there is too much info on screen to refresh the whole web page every second, so the pulse 1000 timer uses javascript to just update the .innerHTML html id='clock', and similarly for id='temp'

Code: [Local Link Removed for Guests]

pulse:
if showclock = 1 then jscall |_$('clock').innerHTML = "| + tim$ + |"|        ' updates the digital clock display
if showtemp = 1 then jscall |_$('temp').innerHTML = "| + temp$ + "˚" + |"|        ' updates the temperature display

Code: [Local Link Removed for Guests]

web:
cls
if showclock = 1 then
 a$ = a$ + |<div style='display: table; margin-right:auto;margin-left:auto;text-align:center;borderx:1px solid gray;'>|
 a$ = a$ + |<style> @font-face { font-family: clockfont; src: url('| + clockfont$ + |');} </style><br>|
 a$ = a$ + |<div [b]id='clock'[/b] style='font-family:clockfont;background:|+clockbak$+|;color:|+clockcol$+|;font-size:|+clocksize$+|em;border:1px solid gray;text-align:center;padding:|+clockpad$+|;|  '.18emX
 a$ = a$ + |display: table; margin-right:auto;margin-left:auto;border-radius:|+clockrad$+|;padding-left:.4em;padding-right:.4em;'>| + tim$ + |</div>|
endif
if (showtemp = 1) then
 a$ = a$ + |<br><div style='display: table; margin-right:auto;margin-left:auto;text-align:center;borderx:1px solid gray;'>|
 a$ = a$ + |<style> @font-face { font-family: tempfont; src: url('| + tempfont$ + |');} </style><br>|
 a$ = a$ + |<div [b]id='temp[/b]' style='font-family: tempfont;background:|+tempbak$+| ;color:|+tempcol$+|;font-size:|+tempsize$+|em;text-align:center;border:1px solid gray;padding:|+temppad$+|;| '.1em;|
 a$ = a$ + |display: table; margin-right:auto;margin-left:auto;border-radius:|+temprad$+|;padding-left:.4em;padding-right:.3em;'>| + temp$ + "&#730;" + |</div>|
 a$ = a$ + |</div>|
 a$=a$ + |<br><br>|
endif

js.jpg

[bugs]

Hi Electroguard,

Your code does the job just as I wanted - sample below for (my) future reference...

Code: [Local Link Removed for Guests]

' button test

  but1$="Start" : but2$=">"
  gosub dohtml
  onhtmlreload dohtml
wait

dobut1:
  if but1$="Start" then but1$="Stop" else but1$= "Start"
   jscall |_$('but1').innerHTML = "| + but1$ + |"|      
return

dobut2:
  if but2$=">" then but2$="II" else but2$= ">"
   jscall |_$('but2').innerHTML = "| + but2$ + |"|   
   refresh
return

dohtml:
  cls
  a$=button$(but1$,dobut1,"but1") & "<br>"
  a$=a$ & button$(but2$,dobut2,"but2")
  html a$
return

Many thanks for taking the time.