Shouldn't this basic javascript work in a topic?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
lise
Propeller Head
Posts: 35
Joined: Tue Mar 24, 2015 12:45 pm

Shouldn't this basic javascript work in a topic?

Post by lise »

Hey there,

Just learning Javascript (I mean, we're talking 'hello world' level).
The basic script works fine when I create my own html file so I know it works, but when I put it in a Flare topic (both manually and using "Insert Script") and build, the resulting page doesn't display the "Click Me" button that it should. (Flare v2018).

I know people are having issues with scripts in Masterpages with this version due to timing issues but I didn't think that would affect a script in an individual topic.

Code in Flare

Code: Select all

<p>
            <script type="text/javascript">/*<![CDATA[*/<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
/*]]>*/</script>
        </p>
Resulting Code in Chrome (F12)

Code: Select all

/*<![CDATA[*/<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
/*]]>*/
Error Code displayed in F12 for that particular line of code:

Uncaught SyntaxError: Unexpected token <

I get a similar error with Firefox. Seems there is an extra "<" in there somewhere, but I count 3 < and 3 > which works out in my books.

I'd love to know what I'm doing wrong.
jjw
Sr. Propeller Head
Posts: 133
Joined: Thu May 08, 2014 4:18 pm
Location: Melbourne

Re: Shouldn't this basic javascript work in a topic?

Post by jjw »

It's not complaining about there being unmatched brackets, it's complaining because you've put html tags inside your script tag. You don't have to use a script tag because your javascript is inline (in the onclick attribute). You can just put this in your topic (in the text editor):

Code: Select all

<p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</p>
<p id="demo"></p>
I imagine you'll eventually rewrite it to call some function like:

Code: Select all

<p>
<button type="button" onclick="sayHello()">Click Me!</button>
</p>
<p id="demo"></p>
Then you would have to put your javascript function inside a script tag:

Code: Select all

<script type="text/javascript">
function sayHello() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
(Flare will add the CDATA bits for you)
lise
Propeller Head
Posts: 35
Joined: Tue Mar 24, 2015 12:45 pm

Re: Shouldn't this basic javascript work in a topic?

Post by lise »

jjw, thank you for the reply.

Would this be accurate? When it is a function,then I use the Insert Script, but when it is just the button, like in your first example, I just put it in the text editor within a paragraph.

Also, I was able to get your first example going fine, but I wasn't able to get the last code to work. I used the Script button, pasted it, and the built page always just displays my content with an extra
"/*]]>*/" at the end of the page (whether my "demo" class paragraph includes content or remains empty). Not sure what I'm doing wrong.
jjw
Sr. Propeller Head
Posts: 133
Joined: Thu May 08, 2014 4:18 pm
Location: Melbourne

Re: Shouldn't this basic javascript work in a topic?

Post by jjw »

lise wrote:
Would this be accurate? When it is a function,then I use the Insert Script, but when it is just the button, like in your first example, I just put it in the text editor within a paragraph.
No, you can define a function inline - like this say (not using script tags):

Code: Select all

<p>
<button type="button" onclick="(function sayHello(){
         document.getElementById('demo').innerHTML = 'Hello JavaScript!';})()">
    Click Me!
</button>
</p>
<p id="demo"> </p>
You might do this, for example, if you wanted to write a more complicated function than just a single line.
Couple of things to note about the example:
  • Although I left the function name in the example, you wouldn't usually bother to name an inline function - after all, you aren't going to call it again. You can just say function() { //function code }
  • Don't forget to put the extra pair brackets at the end (just before the end-quotes) - after a function they mean "run this now".
But the thing is that inline code is pretty limiting. For example, you wouldn't be able to call this function from anywhere else. Also, if anything went wrong with it, it would be harder to track down and test than a nice tidy script somewhere. So although you *could* do this, you usually shouldn't.

For example, imagine you had your nice function "sayHello" in a script tag like this:

Code: Select all

<script type="text/javascript">
function sayHello(message) {
    document.getElementById("demo").innerHTML = message;
}
</script>
Then in your page you could have lots of buttons all calling the same function:

Code: Select all

<p><button type="button" onclick="sayHello('Hi there!')">Say Hi!</button></p>
<p><button type="button" onclick="sayHello('Howdy pal!')">Say Howdy!</button></p>
<p><button type="button" onclick="sayHello('こんにちは!')">Say Hello in Japanese!</button></p>
<p id="demo"></p>
lise wrote:Also, I was able to get your first example going fine, but I wasn't able to get the last code to work. I used the Script button, pasted it, and the built page always just displays my content with an extra
"/*]]>*/" at the end of the page (whether my "demo" class paragraph includes content or remains empty). Not sure what I'm doing wrong.
I suspect you created a script but then pasted my script *including* the script tags. The script button creates the tags for you, so you'll have ended up with an extra pair. Just paste the parts of the example code that is inside the script tags.
Post Reply