How do I change an element valut at runtime? I know changeName.text = n.values is incorrect but what should it be?
include karax / prelude
import karax / [vstyles]
proc onNameEnter(ev: Event; n: VNode) =
if n.value.strip() != "":
changeName.text = n.values
proc createDom(): VNode =
result = buildHtml(tdiv):
h1(id = "changeName"):
text "Name will apear here."
form:
label(`for` = "fname"):
text "Enter Name:"
input(type = "text", id = "fname", name = "fname",
onkeyupenter = onNameEnter)
setRenderer createDom
include karax / prelude
import karax / [vstyles]
var myText = "Name will apear here."
proc onNameEnter(ev: Event; n: VNode) =
if n.value.strip() != "":
myText = n.values
proc createDom(): VNode =
result = buildHtml(tdiv):
h1(id = "changeName"):
text myText
form:
label(`for` = "fname"):
text "Enter Name:"
input(type = "text", id = "fname", name = "fname",
onkeyupenter = onNameEnter)
setRenderer createDom
as it said that it was expecting a string but was getting a kstring.
The program runs now but the text does not change. I was expecting the text "Name will appear here" to change into whatever I wrote in the input field after hitting the enter key.
Don't know if this is the proper way to do it, but you can get/set the innerHTML.
let n = getVNodeById("changeName")
echo n.innerHTML
n.innerHTML = kstring("my new string")
@herdingSheep
Based on @hiteshjasani's answer, this is a tested, working example:
include karax / prelude
import karax / [vstyles]
var name: kstring = "Name will appear here"
proc createDom(): VNode =
result = buildHtml(tdiv):
h1(id = "changeName"):
text name
form:
label(`for` = "fname"):
text "Enter Name:"
input(`type` = "text", id = "fname", name = "fname"):
proc onKeyUp(ev: Event, n: VNode) =
name = n.value()
setRenderer createDom
Here's a better example. It's modified from some code I'm working on but should work. The H1 will update automatically as you type characters into the text field. The text field itself actually won't update without us explicitly changing its value using setInputText(). Not sure if that's intended behavior or a bug.
from strutils import toUpper
include karax / prelude
var myText = ""
proc createDom(): VNode =
result = buildHtml(tdiv):
h1: text myText
input(value = myText):
proc onkeyup(ev: Event, n: VNode) =
myText = toUpper($n.value())
n.setInputText(myText)
setRenderer createDom