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??
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:
jsFiddle Demo
Related
I'm a long-time procedural programmer now assigned to a web-app and studying jquery from a book. The exercise is to run some code on one div selected from a row of 4 <div>s using .each(). I attempted to store the div object that was clicked, then match it as the .each looped thru the 4 divs.
My following code works after trial and error, but the same $(this) seems to sometimes point to a div object, and sometimes to an event object.
How do you explain that behavior?
I understand that .context is deprecated. I tried .target but that didn't seem to work. Is there something else that I should be using?
My primary interest is to understand what is going on (question 1), so if you can provide an explanation and not just an alternative solution (question 2), I'd really appreciate it. Thank you in advance. Here are the code snippets:
<body>
<div id="header">
<h2>Jump for Joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_script.js"></script>
</body>
Jscript
$(document).ready(function()
{
$(".guess_box").click(checkForCode);
function checkForCode()
{
var code_box = 2;
var discount_code = getRandomNum(1,100);
var clicked = $(this); // debugger says clicked is an event object
var iteration = 0;
$(".guess_box").each(function()
{
if ($(this).context === $(clicked).context) //act like event objs
{
if (iteration === code_box)
{
// clicked on correct box
$(this).addClass("discount"); //same $(this) acts like <div>
discount_msg = "<p>Your Code: CODE"+ discount_code +"</p>";
return(false);
}
}
else
{
if (iteration === code_box)
{
// if wrong box clicked, highlight the right one
$(this).addClass("no_discount");
discount_msg = "<p>Sorry, no discount this time</p>";
return(false);
}
}
iteration += 1;
});
$(".guess_box").unbind();
$(this).append(discount_msg); // don't worry about this line
} //checkForCode
}); //ready
The context of this depends on where and how it's used. if your function is called by an an event it will refer to the target of the event, otherwise it will refer to the object being called upon.
What youre seeing in your console is not this, or an event object, it's a jQuery object. If you want to inspect this you need to remove the jQuery wrapper function.
console.log(this);
Event example..
<div>click me</div>
$("div").click(function(){
// referring to the div itself
$(this).text("you clicked me");
// Note you can do it without jQuery as well
// this.innerHTML = "you clicked me";
});
object example
function something(){
this.something = "something";
this.doAThing = function(){
this.something = "something new";
}
}
var thing = new something();
thing.doAThing();
alert(thing.something);
Thanks to those that responded. As Pamblam indicated, I was confusing this and $(this). I replaced 2 lines in my code and it makes more sense:
clicked = $(this) becomes clicked = this
if ($(this).context === $(clicked).context) becomes
if (this === clicked)
Source Code link: http://hexmerchant.github.io/
I'm looking to make this button display different text each time I click it. i'm using html, css, and js.
<button onclick="exploreFunction()">Explore</button>
That's the button. Here is the first function.
function exploreFunction() {
var person = prompt("What is your name", "");
if (person != null) {
document.getElementById("story1").innerHTML =
"-You wake up lying on the ground. You feel a large deposit of energy inside you.";
}
}
What do I need to do to accomplish this?
This could help multiple people out. As I was searching around for an answer here I realized that each answer was so specific that I could not find a match for my topic.
I'm very new to all this and trying to teach myself... got this far : )
Just add an ID to the button, like -
<button id="myButton" onclick="exploreFunction()">Explore</button>
And then you can add to exploreFunction() a very similar command to what you did to change the text -
document.getElementById("myButton").value = "New display text";
If you want the text in the story to change on every button click and the prompt only to be displayed the first time the button is clicked, you could use following approach:
var current = 0;
var person;
var story = ["-You wake up lying on the ground. You feel a large deposit of
energy inside you.", "-You go to the right.", "-The path is blocked."];
function exploreFunction() {
if (current == 0) {
person = prompt("What is your name", "");
}
if (person != null) {
document.getElementById("story1").innerHTML = story[current];
current += 1;
}
}
and add elements to the story. Fiddle
To avoid any errors when the last element of the story is displayed, you can either remove / disable the button or adjust the function to display the text e.g. like this:
if (person != null && current < story.length) {
...
Adjusted Fiddle for that.
If you want the text to change every time, you can insert the name from the prompt if you like.
function exploreFunction() {
var person = prompt("What is your name", "");
if (person != null) {
document.getElementById("story1").innerHTML =
person + ", you wake up lying on the ground. You feel a large deposit of energy inside you.";
}
}
<button onclick="exploreFunction()">Explore</button>
<div id="story1"></div>
This function isn't specific but generic. With the code below you can assign this function to all buttons if you like. I'd advice you to store your different texts in an array
example
<button onclick="exploreFunction(this, functionNext)" >Explore</button>
function exploreFunction(button, functionToContinue) {
var person = prompt("What is your name", "");
if (person != null) {
document.getElementById("story1").innerHTML =
"-You wake up lying on the ground. You feel a large deposit of energy inside you.";
button.onclick = functionToContinue;
}
}
function functionNext()
{
//Example code
document.getElementById("story1").innerHTML =
"-The tooth fairy really came through and you feel enchanted.";
//Other code come here
this.onclick = [new function]; //add your own function name here do not add () because it will get executed when you do, and you want it executed when the user clicks the button.
}
What does the code above do:
Adds the exploreFunction to the button (refer to itself by adding this to the arguments).
Supply the next function as argument
function exploreFunction get executed , name is prompted and innerHTML of story1 is updated.
button refers to the input element. Assign a new onclick handler functionNext
Next time the user clicks on the button functionNext gets executed.
functionNext assigns another onclick handler (to be made by you).
Are you catching the drift?
Since you have the button object in exploreFunction and also in the subsequent functions the this
variable refers to the button object, you can adjust other properties of this button. Such as the value.
example in the functionNext:
this.value = "Click me to advance";
I have an array of string that I want to display one at a time on a keypress. I have an empty div with the class of lyrics. Using
$(document).keyup(function(e){
if (event.which==13)
...
I just am confused on the syntax here, how would I would specify this event print my array to my div. I left out most of my script here because this is the only part I need help with
Here is the HTML just a basic layout
<html>
<head>
<meta charset="UTF-8">
<title>Rotating Messages</title>
<link href="stylesheets/site.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var messages=[
"Tonight I\'m gonna have myself a real good time",
"I feel alive and the world it\'s turning inside out Yeah!",
"I\'m floating around in ecstasy",
"So don\'t stop me now don't stop me",
"Cause I\'m having a good time having a good time",
"I\'m a shooting star leaping through the skies",
"Like a tiger defying the laws of gravity",
"I\'m a racing car passing by like Lady Godiva",
"I'm gonna go go go",
"There\'s no stopping me"
];
</script>
</head>
<body>
<div id="wrapper">
<header class="title">
<h1> Fun with Arrays!</h1>
<div class="lyrics"></div>
...
I just am confused how to use a keypress to print to an empty div
Put the messeges in a queue to display one string at a time.
The shift function lets you iterate over the messages array.
In the below example, after every time the user hits the enter key, a new line is appended to the div with class lyrics
var queue = messages;
$(document).keyup(function(e){
if (e.which == 13) {
var val = queue.shift();
$(".lyrics").append(val);
}
}
Try this:
var i=0;
$(document).keypress(function(e) {
var arrofobject = ["197","Damskie","198","M\u0119skie"];
var len=arrofobject.length;
if (e.which == 13) {
if(i<=len)
{
$(".lyrics").append(arrofobject[i]);
i=i+1;
}
}
});
Check DEMO
I am using JQuery and JavaScript for an input form for time values, and I can't make JavaScript to provide the intended reaction to incorrect input format.
What do I do wrong...?
I have a set of 3 text inputs with class "azeit" (and under these a number of others of class "projekt"). All are used to input time values. As soon as the user exits the field I validate the format, do a calculation with it and display the result of this in a field with id "summe1". This works. If the format is incorrect, I display an alert and what I want to do is return the focus to the field after emptying it. However, the focus never gets returned (although it will get emptied all right). This is it:
var kalkuliere_azeit = function(e) {
var anf = $("#anfang");
var ende = $("#ende");
var pause = $("#pause");
var dauer_in_min = 0;
var ungueltiges = null;
if (nonempty(anf.val(), ende.val()), pause.val()))
{
if (!is_valid_date(make_date(anf.val()))){
ungueltiges = anf;
};
if (!is_valid_date(make_date(ende.val()))){
ungueltiges = ende;
};
if (!is_valid_date(make_date(pause.val()))){
ungueltiges = pause;
};
if (ungueltiges)
{
alert("invalid time"); //This is where I am stuck
ungueltiges.val("");
ungueltiges.focus();
}
else {
dauer_in_min = hourstring_to_min(ende.val())
- hourstring_to_min(anf.val())
- hourstring_to_min(pause.val());
$("#summe1").text(min_to_hhmm(dauer_in_min));
};
};
};
....
$(document).ready(function() {
$(".projekt").change( kalkuliere_summe);
$(".azeit").focusout(kalkuliere_azeit);
});
The fields with the class "projekt" are below those with the class "azeit" so they'll get the focus when the user leaves the third field of class "azeit".
I apologize for supplying incomplete source code. I hope someone can see what's wrong.
One point I'd like to mention is that I tried binding the handler to onblur and onfocus as well. When I bind it to onfocus the focus does get reset to the field, but the last field the user enters will not update the field $("#summe1") correctly (because this would need focusing another field of the same class).
Im not sure whats wrong with your code but one way of doing it would be to put the focus into a function.
So ...
function focusIt()
{
var mytext = document.getElementById("divId");
mytext.val("");
mytext.focus();
}
And call it from the if/else statement ...
if (ungueltiges)
{
alert("invalid time");
focusIt()
}
im trying to create a sort of playlist feature that will work on the iPhone using a combination of HTML5 and javascript. I'm very new to the platform and I was hoping maybe someone here could help me identify the problem with my code. The first song properly autoplays, but when it ends the next one does not load and play. The javascript code for my site is provided below, thanks in advance. (my apologies if this code is terribly messed up, i assembled this from what iv learned and what i could find different places online)
<script type="text/javascript">
var songname="Bottoms Up";
var counter=1;
var totalsongs=3;
while (counter<=totalsongs-1) {
document.write(<h2>songname</h2>);
switch (counter) {
case 1:
var nextSong="audio/Hey.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="Hey";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
} //if close
} //onend function close
case 2:
var nextSong="audio/I Like It.mp3";
var audioPlayer=document.getElementById('audioPlayer');
audioPlayer.onend = function() {
audioPlayer.src = nextSong;
songname="I Like It";
counter=(counter+1);
if(counter>totalsongs-1) {
counter=1;
} //if close
} //onend function close
} //switch close
} //while close
</script>
<center><audio src="audio/Bottoms Up.mp3" autoplay controls /></center>
A few things:
Give the audio element an id:
<audio src="audio/Bottoms Up.mp3" autoplay controls id="audioPlayer" /></center>
Use arrays instead of many variables:
var songs=({{"title": "First title","filename":"firstfile.mp3"},
{"title": "Second title","filename":"secondfile.mp3"}});
Listen for the event ended like this:
document.getElementById("audioPlayer").addEventListener("ended", nextSong, false);
And put the script in the <head> element.
var audioPlayer=document.getElementById('audioPlayer');
… will error, since the element doesn't have an id.