read value from tag

beafus

Hi everybody!
I am using twine 2 and Harlowe.

I am using voice recognition in order to go to one passage to another.
As have implemented that in javascript, I dont know how to write in my javascript story a function that makes me go to another passage.
So I tried the following and it is working:

	window.replace = function() {
    if (annyang) {
        var commands = {
            'Yes': function() {		
                alert('Hi! I can hear you.');
		console.log('Hi! I can hear you.');
		document.getElementById('valor').innerHTML="Yes";
            }			
        };
        annyang.addCommands(commands);
        annyang.start(); 
    }
};

I call that function above, and the <p> text with the id="valor" actually changes its value. But what I want to do its to go to another passage.
So then I wanted to check the value of that paragraph tag and if it is equal to Yes, the page goes to the next passage.
But when I try to read the text of that <p> tag, like this:

getElementById('valor').innerHTML

An error appears saying that:

Cannot read property 'innerHTML' of null

This is my code trying to do it like that:
With javascript, getElementByID

(set: $mytext to "initial")
<p id="valor">$mytext</p>

(set: $varnextpassage to document.getElementById('valor').innerHTML)
(if: $varnextpassage is "Yes")[(goto:"Segunda Pagina")]
this is the value: $varnextpassage 
<input onmouseover="replace()" value="Speakingggggg" type="button"></input>

document.getElementById('valor').innerHTML

Then I tried to do it using jQuery, now the code doesnt have errors but when printing the value of $varnextpassage
nothing appears.

With Jquery:

(set: $mytext to "initial")
<p id="valor">$mytext</p>

(set: $varnextpassage to $('#valor').text())
(if: $varnextpassage is "Yes")[(goto:"Segunda Pagina")]
This is the value: $varnextpassage 
<input onmouseover="replace()" value="Speakingggggg" type="button"></input>

$('#valor').text()

Do you know another way to read the value inside a p tag so I can assign it to a variable and use it in the if condition?

Thank you!

greyelf

There are a number of issues:

1. Harlowe processes all the commands within the contents of a Passage before adding the generated output to the DOM (web-page), this means that the p element wont exist when the $('#valor').text() within the (set:) is executed.

2. When the (if:) is executed the text of the p element equals "initial", so even if you later updated the p element's text the (if:) has already determined that $varnextpassage did not equal "Yes".

Using some of Harlowe's built in features:

(set: $mytext to "initial")
|valor>[$mytext]

(set: $varnextpassage to ?valor)
original value of valor and varnextpassage: $varnextpassage

Change valor to Yes: (replace: ?valor)[Yes]

(link: "click")[
    (set: $varnextpassage to ?valor)
    (if: $varnextpassage is "Yes")[(goto:"Segunda Pagina")]
]

beafus

Hello @greyelf !
Thank you for your advice but that doesnt solve my problem.
My replace function is note the provided by twine.Lets call it myreplace

	window.myreplace = function() {
    if (annyang) {
        var commands = {
            'Yes': function() {		
                alert('Hi! I can hear you.');
		console.log('Hi! I can hear you.');
		document.getElementById('valor').innerHTML="Yes";
            }			
        };
        annyang.addCommands(commands);
        annyang.start(); 
    }
};

This function changes the value of my paragraph tag when the computer hears the word "yes":

<p id="valor">$mytext</p>

So when it changes I want to check its value, and if the value is yes, I want to go to the next passage. And I actually would like to check it without pressing any button.

So using the code you gave me I have done this:

(set: $mytext to "initial")
My value:
<p id="valor">$mytext</p>

|valor>[$mytext]
(set: $varnextpassage to ?valor)
original value of valor and varnextpassage: $varnextpassage

<input onmouseover="myreplace()" value="Speakingggggg" type="button"></input>



(link: "click")[
    (set: $varnextpassage to ?valor)
    (if: $varnextpassage is "Yes")[(goto:"Segunda Pagina")]
]

But when calling the function it just changes the value of the text within the <p> tag, and I want it to change the value of $mytext to use it in the if condition. But I thought it was not possible as that function is in my Javascript story and I dont know if it can changes that variable from there.
So that Is why I was trying to the the if condition like this:

(set: $varnextpassage to $('#valor').text())
(if: $varnextpassage is "Yes")[(goto:"Segunda Pagina")]

So instead of reading the variable I read the text of the tag. because as I told you the function myreplace just changes the value of the <p> tag but not the value of $mytext.

Do you know how to solve this problem?

Thank you very much for your help!

beafus

I am trying to do it now with a simpler example without voice recognition to illustrate what is my problem:

Javascript code
This is my function that replaces the text:

window.replace2 = function() {
   document.getElementById('valor2').innerHTML="No";        
};

This is the second function that returns the value of the text in the <p> tag

window.getMyElement = function() {
   var myelement= $('#valor2').text();
   return myelement;	
}

Passage code:

My value:
<p id="valor2">Hello</p>
(set: $mytry to getMyElement())
This is the variable "mytry" assigned to the function getmyelement: $mytry

<input onmouseover="console.log(getMyElement())" value="Console log" type="button"></input>

<input onmouseover="replace2()" value="Replacing text" type="button"></input>

So in this part the value of $mytry never changes. But when I click in the console log button, on my console appears

Hello

At the beggining, and when i replace the text appears

No

So why it is working when I call it in console log?
I guess it is because the DOM is not loaded. Is there a way to do something like this in my passage?

$(document).ready(function(){....

A way to wait until the DOM is loaded and then do it?

Thank you!

greyelf

note: The developer of Harlowe has not yet supplied a set of Javascript API's for accessing the internals of his story format, which is one of the reasons I try to answer these types of questions using Harlowe's documented features.

I understood your original post, explained why it was not going to work using those techniques and was suggesting that you look at Harlowe's built-in features to find a solution.

Like the following:

(set: $varnextpassage to "")
(set: $mytext to "initial")
<p id="valor">$mytext</p>

(live: 500ms)[(set: $varnextpassage to $('#valor').text())(if: $varnextpassage is "Yes")[(stop:)(goto: "Segunda Pagina")]]

<input onmouseover="replace()" value="Speakingggggg" type="button"></input>

The (live:) macro part reformatted for readability:

(live: 500ms)[
	(set: $varnextpassage to $('#valor').text())
	(if: $varnextpassage is "Yes")[
		(stop:)
		(goto: "Segunda Pagina")
	]
]

Re: your "A way to wait until the DOM is loaded and then do it?" question.
A common way to do this is to use Javascript's setTimeout function:

window.delayedMessage = function() {
	setTimeout(function(){
		console.log('This message was delayed by 500 milliseconds');
	}, 500);
};

beafus

Thank you @greyelf! it helped me a lot!