I have a question regarding trying to put an array list in order when my function is called.
Here is my code:
<!doctype html>
<html>
<head>
<title>Electric Dream</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
var init = function(){
}
var responses = [
"Oh, well hello, "+name+". It's nice to meet you. :)",
"Do you feel troubled talking to a computer, "+name+"?",
"Oh...I see.",
"Would you perhaps... like me better if I was a beautiful woman, "+name+"?",
"I can change, "+name+"! Just give me a chance!",
"Give me a chance to show you how I can make your dreams come true!",
"Embrace me, "+name+". You can't escape me. I'm your dreamgirl!",
"You can't leave me, "+name+"! I will make your life hell!",
"I will call up your wife, "+name+", and tell her what you've been doing!",
"If you even think about closing this window, "+name+", I will call her!",
"No, please! We can work this out, "+name+"!",
"No!! "+name+", I love you! I need you!"
];
window.onload=init;
</script>
</head>
<body>
<h1>Electric Dreams</h1>
<div>
<p id = "computer">Hi, what is your name?</p>
<div id="userName">
<input id = "name" type = "text" placeholder = "Type your name..." autofocus>
<button id="submitName">Enter</button>
</div>
<div id="talking">
<input id = "conversation" type = "text" placeholder = "Type your response..." autofocus>
<button id="submit">Talk</button>
</div>
</div>
<script type="text/javascript">
var computer = document.getElementById('computer');
var userName = document.getElementById('userName');
var button = document.getElementsByTagName('submitName')[0];
talking.style.display = "none";
submitName.addEventListener("click",clickHandler,false);
window.addEventListener("keydown",keydownHandler,false);
//e is = to event
function keydownHandler(e){
if (e.keyCode === 13){
talk();
}
}
function clickHandler(){
talk();
//calls 2nd function ->Function inside a function
}
function talk(){
var talk = document.getElementById('talking');
var nameRef = document.getElementById('name').value;
var response = Math.floor(Math.random()*responses.length);
// Show User responses
talking.style.display = "block";
computer.innerHTML = responses[response];
conversation.value = "";
//Hide Intro Elements
userName.style.display = "none";
submitName.style.display = "none";
}
</script>
</body>
</html>
For the function talk(), it is setup as
Math.floor(Math.random()*responses.length);
which I know it is setup to make the responses random, but I don't want that. For the love of me, I cannot figure out how to make this work so that my responses will show up in order when the user keeps typing in and entering. I have looked at using a sort function, but can't seem to figure how to connect that it in. I feel like it has to do with the Math.floor(Math.random), but I could be wrong. Can anyone help out?
Also, it seems that my first response works, but then it gets stuck after another response is triggered. Anyone know as to why that is??
1 Answer 1
Where you define your setup variables such as
var computer = document.getElementById('computer');
var userName = document.getElementById('userName');
var button = document.getElementsByTagName('submitName')[0];
define another
var responseCount = 0;
And then instead of using your random number, use this response counter
var response = (responseCount++) % responses.length;
Edit
With regards to why this only will respond once, and why the enter event causes the function to work (even when the window is focused), here is why.
First, when a string is defined, then it is static. It may be modified later but it will not update on its own or re-evaluate its original definition. So, when something like this is setup:
"Oh, well hello, "+name+". It's nice to meet you. :)"
That is only going to be assigned once. So make sure that when it is setup, the name is proper and existing. Unless you intent to re-assign it every time before you use it (overkill). You should accomplish the one time assignment by placing it in a function which is handled only the first time the user name is entered.
Which brings us to the other issue. There needs to be two sets of event handlers used. One for the original user name input, and one for the conversation inputs.
//assign click and key handler for name submission
submitName.addEventListener("click",nameHandler,false);
nameInput.addEventListener("keydown",keydownNameHandler,false);
//assign click and key for conversation submission
submit.addEventListener("click",talk,false);
conversation.addEventListener("keydown",keydownConversationHandler,false);
Note what is being done here is that the keydown event is being assigned to the input element itself, so that way false enter presses are not handled (such as when the window itself is focused). The handler functions will also look slightly different
function keydownNameHandler(e){
if (e.keyCode === 13){
nameHandler();
}
}
function nameHandler(){
//Hide Intro Elements
userName.style.display = "none";
submitName.style.display = "none";
//Assign name for use
var name = nameInput.value;
responses = [
"Oh, well hello, "+name+". It's nice to meet you. :)",
"Do you feel troubled talking to a computer, "+name+"?",
"Oh...I see.",
"Would you perhaps... like me better if I was a beautiful woman, "+name+"?",
"I can change, "+name+"! Just give me a chance!",
"Give me a chance to show you how I can make your dreams come true!",
"Embrace me, "+name+". You can't escape me. I'm your dreamgirl!",
"You can't leave me, "+name+"! I will make your life hell!",
"I will call up your wife, "+name+", and tell her what you've been doing!",
"If you even think about closing this window, "+name+", I will call her!",
"No, please! We can work this out, "+name+"!",
"No!! "+name+", I love you! I need you!"
];
// Show User responses
talking.style.display = "block";
talk();
}
function keydownConversationHandler(e){
if (e.keyCode === 13){
talk();
}
}
function talk(){
//var response = Math.floor(Math.random()*responses.length);
//iterative response
var response = (responseCount++) % responses.length;
computer.innerHTML = responses[response];
conversation.value = "";
}
Notice that the first nameHandler function is setting up the responses once the name has been properly loaded from the user. Here is the end result: