In w3schools.com, you can separate two words in an input like this:
<!DOCTYPE html>
<html>
<body>
<p>What is your first and last name?</p>
<input id="firstlast" name="firstlast">
<button onclick="myFunction()">Try it</button>
<p id="first"></p>
<p id="last"></p>
<script>
function myFunction() {
var firstlast = document.getElementById("firstlast").value;
var first = firstlast.split(/ +/)[0];
var last = firstlast.split(/ +/)[1];
document.getElementById("first").innerHTML = first;
document.getElementById("last").innerHTML = last;
}
</script>
</body>
</html>
Nothing remotely similar seems to work in Squiffy. Does anyone know why this is? How can I get Squiffy to do the same thing?
Thanks!
Because you're putting HTML and Javascript where it's expecting HTML and Squiffy markup.
Squiffy lets you put stuff like {attribute_name} in your text, and they are replaced by the value of the attribute.
In this case, the { and } on your function are causing it to look for an attribute with a very long name that starts with var firstname.
As there is no such attribute, the line which gets added to the document is:
<script>
function myFunction() null
</script>
which doesn't work.
Squiffy has its own way of including javascript in a section: you put it before the text, with four spaces at the beginning of the line.
Although this code is run inside an eval block, which means that local variables defined inside it (including old-style function definitions) will be local, and only accessible within that particular code block.
So to make it work as you wanted, you will need to explicitly declare the function as global by referring to the window object by name.
Like this:
window.myFunction = function() {
var firstlast = document.getElementById("firstlast").value;
var first = firstlast.split(/ +/)[0];
var last = firstlast.split(/ +/)[1];
document.getElementById("first").innerHTML = first;
document.getElementById("last").innerHTML = last;
};
<p>What is your first and last name?</p>
<input id="firstlast" name="firstlast">
<button onclick="myFunction()">Try it</button>
<p id="first"></p>
<p id="last"></p>
I tried your solution, Mrangel, and unfortunately Squiffy just gave me a blank screen.
It works fine for me.
What exactly did you try?
Can you show an example that doesn't work?
I'm an idiot! I pasted your code exactly but forgot to tab the first line to make Squiffy know it was javascript. It works great now. You are a wonderful person, Mrangel!
Is there a way to use squiffy.get to make Squiffy continue recognizing {first} and {last} as attributes?
Is there a way to use
squiffy.getto make Squiffy continue recognizing {first} and {last} as attributes?
That's what squiffy.set is for.
Within your function you could have a line like squiffy.set("first", first); which creates a squiffy attribute from the javascript variable.
Mrangel you really are a great person. Thanks so much for helping with this! It works perfectly now!
In order to keep my game consistent, what if I want to use a Squiffy link instead of a button to call "myFunction()"? Is there a way to do that?
I think I got it!
@title Finally a Squiffy Two-Word Parser
window.myFunction = function() {
var firstlast = document.getElementById("firstlast").value;
var first = firstlast.split(/ +/)[0];
var last = firstlast.split(/ +/)[1];
document.getElementById("first").innerHTML = first;
document.getElementById("last").innerHTML = last;
squiffy.set("first", first);
squiffy.set("last", last);
};
What is your first and last name?
<input id="firstlast" oninput="myFunction()" name="firstlast"> [next]
<meta id="first"></meta> <meta id="last"></meta>
[next]:
I'm {first} of the family {last}.