Change the background of the input field based on user input

Using JavaScript with Hype
1

Hello!

I am stuck. I have used CSS to produce an input field with a background colour. I have added this to the innerHTML of the element. I would like the colour to change to green if the correct number is inputted into the field or red if the number is incorrect, once the button is clicked. My function does not sadly work. The element background will change to red (although not green) but not the background of the field.

If anyone with a bigger brain can help, I would be hugely grateful.

Simonchangeinputfieldbackgroundcolour.hype.zip (8.9 KB)

2

Hi Simon!

You need to use the “id” of the form as well in your script:changeinputfieldbackgroundcolour_JHSv1.hype.zip (13.8 KB)


Fig.1 - Form id

form ID


Fig. 2 - Form id used in code

Code

4 Likes
3

Thank you so much. Works really well now. I really appreciate the help!

4

You can use the new HTML-Attributes feature in Hype 4, so you don´t have to create the input form inside the inner HTML field. Just look at the identity panel -> HTML attributes (contenteditable -> true)… Use ‘innerHTML’ within your script:

var inputValue = document.getElementById('inputBox').innerHTML;
	
if (inputValue == 5) {
	document.getElementById('inputBox').style.backgroundColor = 'green';
} else {
	hypeDocument.getElementById('inputBox').style.backgroundColor = 'red';
}

Regards,
Kalle

changeinputfieldbackgroundcolour_JHSv2hype.zip (15.4 KB)

5 Likes
5

Amazing! Thank you so much.

1 Like