Desktop version not working

Using JavaScript with Hype
1

I created a simple application for a project. Basically, the webpage has a text box and when the content in that contains certain keywords, it changes the contents of the page. It was all working fine, until I created a mobile version of it. Now, the mobile version still works flawlessly, but, the desktop version does nothing I have attached my file. Someone please, help.

P.S.: The text box will respond to any one of the following keywords at a time (case sensitive):

headache
chest
joint
tooth
stomach
cough

Also, do not press enter. It’s not a form. It won’t respond to that. Just click on ‘Help Me!’.

Oral-B.hype.zip (171.9 KB)

2

You’ll need to create either separate JavaScript functions for this document so that the form id ‘symptoms’ is different between your two layouts, or use classes to retrieve the value of that input field. As it is now, you have two input forms and both use the element id ‘symptoms’ so the JavaScript function is trying to retrieve the value from both and getting confused. The quickest way to fix this would be to duplicate the JS function check and make a mobile version that reads the value of symptoms-mobile, and then adjust the ID of the input form you have in the mobile layout.

1 Like
3

Got it. Thanks!

4

Another question, though.

If I wish for users to be able to press enter to simulate that button click, how can I do that?

At this moment, I created a function called enter(), set it to run on scene load, but, it doesn’t work.

This is the source of enter():

window.text = document.getElementById("symptoms");
	
text.addEventListener("keypress", function(event)
	{
		if (event.keyCode == 13)
	    document.getElementById("enter").click();
	});
5

There are likely a few ways to do this.
But maybe the simplest for this project is not to try and click the button with click() to call your check() function.

You do to need to.
In Hype you can call it’s functions by using it’s hypeDocument.functions() API .
So you can use this to call the check() function.

	window.text = document.getElementById("symptoms");
	
window.text.addEventListener("keypress", function(event)
	{
		if (event.keyCode == 13)
	    hypeDocument.functions().check(hypeDocument, element, event)
	});

One other thing you will need to do, is stop the scene reloading when you use the enter key to submit the form.

So in your form add onsubmit="return false"

i.e

<div class="resize">
<form onsubmit="return false" class="col s12" action="" method="get" id="form1">
<div class="input-field col s6">
<input id="symptoms" type="text" class="validate">
<label class="">					
What are your symptoms?	
</label>
</div>
</form>
</div>
6

I tried it. It didn’t work. Maybe, I made a mistake? I have attached the updated file. Please, check it.

Oral-B.hype.zip (176.5 KB)

7

You have changed the name of your check function.

In the code you need to call the function by it’s name using the same name you have change the function to.
Otherwise it will not hear you.

You also have an errors in the loader function.

8

Yeah, this one is totally my bad. I had turned off my laptop to go to bed and got your solution. Turned it back on and just copy-pasted your code. Saw, it didn’t work and came here to message. Went to bed and realised that I had changed all the names. So, worked on it as the first thing in morning. It works! Thanks a lot!