I'm Working on Simon game. I need help with understanding how to reference an id and creating an action without a click but say with page refresh.
1) on screen refresh (the start of the game), I CAN randomize the color id chosen...and save it in a var called randomColorChosen... but I can NOT figure out how to make that var randomColorChosen, make the same actions as if they were a clicked on button like my code at the bottom.
2) My btn click and animate color and play sound... work fine,
I have tried many iterations of my newbie coding...
Now I'm just guessing and here is it's last state....
... random Color Chosen works... its what's next I need help (explanations on)
... $(document).keydown(function(event) {} works and tested with an alert()
... but the rest, down until my but clicks, I have changed so many times my head is spinning. Help my understand where I am dumb AF! lol
... user btn click event action and sound... works fine!
Here is my code so far:
buttonColors=["btn green","btn red", "btn yellow", "btn blue"];
randomColorChosen=buttonColors[Math.floor(Math.random() * (buttonColors.length))];
$(document).keydown(function(event) {
setTimeout(2000);
$("#id").attr(function(randomColorChosen){
$(this).fadeOut(100).fadeIn(100);
var myPadColor = $(this).attr("#id");
});
});
$(document).ready(function() {
$(".btn").click(function(event) {
$(this).fadeOut(100).fadeIn(100);//when a "this" button is clicked .fadeOut(100).fadeIn(100);
var myPadColor = $(this).attr("class");
;
switch (myPadColor) {
case "btn green":
var greenPad = new Audio('sounds/green.mp3');
greenPad.play();
break;
case "btn red":
var redPad = new Audio('sounds/red.mp3');
redPad.play();
break;
case "btn yellow":
var yellowPad = new Audio('sounds/yellow.mp3');
yellowPad.play();
break;
case "btn blue":
var bluePad = new Audio('sounds/blue.mp3');
bluePad.play();
break;
default:
console.log(myPadColor);
}
});
});
It was a little unclear what you are trying to accomplish. I created an example with some possible improved code.
$(function() {
var seq = [];
var player = [];
var c;
var round = 0;
var sounds = [
new Audio('sounds/green.mp3'),
new Audio('sounds/red.mp3'),
new Audio('sounds/yellow.mp3'),
new Audio('sounds/blue.mp3')
];
function getRandom() {
return Math.floor(Math.random() * 4);
}
function initSeq(n) {
for (var i = 0; i < n; i++) {
seq.push(getRandom());
}
}
function flash(b) {
//console.log("Flashing Button " + b);
var btn = $("#game-board .btn").eq(b);
btn.fadeTo(300, 1.0, function() {
btn.fadeTo(300, 0.35);
});
sounds[b].play();
}
function endGame() {
$("#game-board").hide();
$("h1").show();
$("h1").after("<h2>Gome Over. Score: " + player.length + "</h2>");
}
function waitUserInput() {
c = setInterval(endGame, 10 * 1000);
}
function playSequence(x) {
if (x == 0 || x == undefined) {
x = 20;
}
$.each(seq, function(i, s) {
if (i < x) {
flash(s);
}
});
}
function nextRound() {
playSequence(++round);
}
function initGame() {
initSeq(20);
player = [];
c = null;
round = 0;
nextRound();
}
$(document).keydown(function(event) {
$("h1").hide();
$("#game-board").show();
initGame();
});
$("#game-board .btn").click(function(event) {
var i = $(this).index();
flash(i);
player.push(i);
});
$("#playSeq").click(function() {
var p = $(this).next().val();
console.log("TEST: Play Sequence to " + p + " Position.");
if (seq.length == 0) {
initSeq(20);
$("#game-board").show();
}
//console.log("TEST", seq);
playSequence(p);
});
});
#game-board {
width: 410px;
white-space: normal;
}
.btn {
width: 200px;
height: 200px;
display: inline-block;
opacity: 0.35;
padding: 0;
margin: 0;
border: 0;
}
.green {
background: green;
border-radius: 199px 0 0 0;
}
.red {
border: 0;
background: red;
border-radius: 0 199px 0 0;
}
.yellow {
border: 0;
background: yellow;
opacity: 0.65;
border-radius: 0 0 0 199px;
}
.blue {
border: 0;
background: blue;
opacity: 0.65;
border-radius: 0 0 199px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test-bar">
<button id="playSeq">Play To</button> <input type="number" value="1" style="width: 2.5em;" />
</div>
<h1>Press Any Key to Begin.</h1>
<div id="game-board" style="display: none;">
<div class="btn green"></div>
<div class="btn red"></div>
<div class="btn yellow"></div>
<div class="btn blue"></div>
</div>
Related
I want to add 10 points when blue box goes into brown box.
I tried to set score = 0 and points to add = 10 but it doesn't work.
I alert '+10 points' and it shows me the alert so I guess the problem is the DOM ?!?
Any suggestions ?
Thanks !
let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 10) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob")
}
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
$(drawPone).addClass("p-0")
}
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
if ($(".p-0").hasClass("ob")) {
alert('add +10 points !!!')
addPoints.text( parseInt(addPoints.text()) + obs );
}
moveCounter += 1;
if ($(".p-0").hasClass("ob")) {
}
$pOne = $('.p-0')
$pOneNext = $pOne.next();
$pOne.removeClass('p-0');
$pOneNext.addClass('p-0');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.ob {
background-color: brown;
}
.p-0 {
background-color: blue;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
<button id="button_right">right</button><br>
</div>
<div id="score">
</div>
Thank you very much! I am new to JavaScript/ JQuery
Thank you very much!
You are trying to change the HTML inside of the div with id "score".
Selecting the css element using $("#id") retrieves the DOM element and not its contents so adding the score directly to it has no consequences.
What you want to do is: update the score variable and then set the HTML inside the div to the score value.
So instead of just:
addPoints += obs
you should
score += obs
addPoints.html(score)
I am trying to get my cards to display 2 different boxes for the cards. If I hover just right with inspector I can see both cards are there, but I am having difficulty separating the two side by side. I am mostly trying to follow a tutorial but it has you do a lot of the work on your own, and I don't want to advance until I have this completely ready for the next task it gives me. Any help is greatly appreciated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
War Cards!
</title>
<style>
.icard
{
position: absolute;
padding: 10px;
height: 200px;
width: 150px;
border: 1px solid black;
border-radius: 15px;
background-color: white;
display: inline-block;
top: 0;
left: 0;
}
.hand
{
position: relative;
}
.players
{
float: left;
width: 49%;
min-height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="start"></div>
<div id="message"></div>
<div id="board">
<div id="player1" class="players">
<div class="score"></div>
<div class="hand"></div>
</div>
<div id="player2">
<div class="score"></div>
<div class="hand"></div>
</div>
</div>
<div id="action">
<button id="btnBattle" type="button" class="btn">
Fight!
</button>
</div>
</div>
<script src="js/jquery-3.3.1.min.js">
</script>
<script>
$('document').ready(function() {
var suits = ["spades", "hearts", "clubs", "diams"];
var cardFace = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"];
var cards = [];
var players = [[], []];
var firstRun = true;
var gameOver = false;
var fightButton = document.querySelector("#btnBattle");
var p1 = document.querySelector('#player1 .hand');
var p2 = document.querySelector('#player2 .hand');
fightButton.addEventListener('click', battle);
function battle()
{
if (firstRun)
{
firstRun = false;
buildCards();
shuffleArray(cards);
dealCards(cards);
}
attack();
console.log('Works');
}
function attack()
{
if(!gameOver)
{
var card1 = players[0].shift();
var card2 = players[1].shift();
var pot = [card1, card2]
p1.innerHTML = showCard(card1, 0);
p2.innerHTML = showCard(card2, 0)
// Check Winners
// Update Scores
}
}
function showCard(c, p)
{
var move = p * 40;
var bgColor = (c.icon == 'H' || c.icon == 'D') ? 'red' : 'black';
var bCard = '<div class="icard" style="color:'+ bgColor +'">' + c.num + ' &' + c.suit + ';</div>';
console.log(c, move);
return bCard;
}
function buildCards()
{
cards = [];
for (s in suits)
{
var suitNew = suits[s][0].toUpperCase();
for(n in cardFace)
{
var card = {
suit:suits[s],
num:cardFace[n],
cardValue:parseInt(n) +2,
icon:suitNew
}
cards.push(card);
}
}
console.log(cards);
}
function dealCards(array)
{
for(var i = 0; i < array.length; i++)
{
// swaps between remainder 0 and 1, which signifies player[0 OR 1], and then pushes that onto parameter,(array), which
// is cards which is an array, at the index of for loop [i]
var m = i % 2;
players[m].push(array[i])
}
console.log(players)
}
//
// function dealCards(array)
// {
// for(var i = 0; i < array.length; i++)
// {
// if(i % 2 === 0 )
// {
// players[0].push(array[i]);
// }
// else
// {
// players[1].push(array[i]);
// }
//
// }
// console.log(players);
// }
//
function shuffleArray(array)
{
for(var x = array.length -1; x > 0; x--)
{
var ii = Math.floor(Math.random() * (x + 1))
var temp = array[x];
array[x] = array[ii];
array[ii] = temp;
}
console.log(cards);
return array;
}
});
</script>
</body>
</html>
I think you missed to add the players class to the player 2 element.
<div id="player2" class="players">
https://jsfiddle.net/zkw9s4an/
Add css to the player 2 div to move it margin left by the amount you need.
#player2
{
margin-left:10%;
}
Refer this.
I’m making a Simon Game and I’ve already added the logic but I don’t know how to pause an execution until the player has pressed on a tile. I’ve made a function called user() that records users input and pushes it to the userSeq array. Then I made a function checkTurn() to check who’s turn is next (the computer or the user). If it’s the user’s turn then I want in the else to wait for the user() function to finish and then call the callcheckClicks() to check if user’s input is the same as computer’s and then continue to the new level. Please help!
Here’s a link: https://codepen.io/Teo03/pen/yPvbwY
$(document).ready(function() {
var green = document.getElementById("green");
var red = document.getElementById("red");
var yellow = document.getElementById("yellow");
var blue = document.getElementById("blue");
var tile = document.getElementsByClassName("tile");
//audio for every click
var audio = [
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
];
// record the round
var round = 0;
// record the random presses
var compSeq = [];
//record user clicks
var userSeq = [];
//if it's false computer moves
var turn = false;
//round number
var round = 0;
//count how many moves user does
var playerIndex = 0;
//start
$(".start").click(function() {
round++;
turn = false;
$("#round")
.html("Round: " + round)
.show();
$(".start, .reset").hide();
checkTurn();
});
function addNewRandomNumber() {
var random = Math.floor(Math.random() * 4) + 1;
computer(random);
console.log("random" + random);
}
// call the computer to make an action
function callComp() {
addNewRandomNumber();
enableClicks();
turn = true;
checkTurn();
}
function callCheckClicks() {
checkClicks();
}
//check every time the user clicks if the user clicks are the same as the computer's
function checkClicks() {
console.log("random clicks: " + compSeq);
//if user guess is correct
if (userSeq[playerIndex] == compSeq[playerIndex]) {
if (userSeq[playerIndex].length == compSeq[playerIndex].length) {
// if they are then it's computer's turn
callComp();
} else {
playerIndex += 1;
$(".start")
.html("Next")
.show();
// user is right, he can continue inputting another clicks if the sequence has
checkTurn();
}
} else {
resetUserVariables(); // user is wrong
}
}
//reset playerIndex
function resetUserVariables() {
playerIndex = 0;
}
//press a random button
function computer(ran) {
switch (ran) {
case 1:
blink(green);
audio[0].play();
compSeq.push(1);
break;
case 2:
blink(red);
audio[1].play();
compSeq.push(2);
break;
case 3:
blink(blue);
audio[2].play();
compSeq.push(3);
break;
case 4:
blink(yellow);
audio[3].play();
compSeq.push(4);
break;
default:
return;
}
console.log("random clicks: " + compSeq);
enableClicks();
turn = true;
checkTurn();
}
//blink a tile
function blink(tile) {
$(tile).fadeOut("slow", function() {
$(this).fadeIn("slow", function() {
return;
});
});
}
//user input
function user() {
if ($(this).is("#green")) {
userSeq.push(1);
audio[0].play();
blink(green);
playerIndex++;
} else if ($(this).is("#red")) {
userSeq.push(2);
audio[1].play();
blink(red);
playerIndex++;
} else if ($(this).is("#blue")) {
userSeq.push(3);
audio[2].play();
blink(blue);
playerIndex++;
} else if ($(this).is("#yellow")) {
userSeq.push(4);
audio[3].play();
blink(yellow);
playerIndex++;
}
turn = false;
checkTurn();
console.log("user clicks: " + userSeq);
}
//add an event listener for user clicks
function enableClicks() {
for (var i = 0; i < tile.length; i++) {
tile[i].addEventListener("click", user, false);
}
}
//disable clicks when is computer's turn
function disableClicks() {
for (var i = 0; i < tile.length; i++) {
tile[i].removeEventListener("click", user, false);
}
}
//check who's turn is next
function checkTurn() {
if (turn === false) {
//call computer
callComp();
} else {
callCheckClicks();
}
}
//document.ready().
});
html * {
text-align: center;
background-color: #d3d3d3;
}
h1 {
font-size: 60px;
padding-bottom: 10px;
}
h3 {
display: none;
padding-bottom: 30px;
}
.circle {
background: #d3d3d3;
width: 320px;
height: 320px;
border-radius: 50%;
border: 10px solid gray;
margin: auto;
}
.tile {
height: 150px;
width: 150px;
float: left;
cursor: pointer;
}
#red {
background-color: red;
border-top-right-radius: 100%;
}
#green {
background-color: green;
border-top-left-radius: 100%;
}
#blue {
background-color: blue;
border-bottom-right-radius: 100%;
}
#yellow {
background-color: yellow;
border-bottom-left-radius: 100%;
}
btn {
padding-top: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1 class="text-center">Simon Game</h1>
<div class="container text-center">
<h3 id="round">Round: </h3>
<div class="circle">
<div class="tile" onclick="user()" id="green"></div>
<div class="tile" onclick="user()" id="red"></div>
<div class="tile" onclick="user()" id="yellow"></div>
<div class="tile" onclick="user()" id="blue"></div>
</div>
<a class="btn start btn-default">Start</a>
<a class="btn reset btn-default" onclick="reset()">Reset</a>
<!-- container !-->
</div>
I believe what you are looking for is setTimeout()
This takes 2 parameters, your function and the number of milliseconds.
For example if you want to execute a function after three seconds of an onclick event...
<button onclick="setTimeout(myFunction, 3000);">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Then use a promise like explained here:
Javascript - Wait the true ending of a function that uses setTimeout
Another thing to note is the flow of the program. Currently you are using a checkTurn method that calls a callCheckClicks method that calls a checkClicks and checkClicks calls checkTurn again. With this your program will end up crashing as it continuously loops forever. In order to do this you need to activate your if/else within your checkClicks to have
turn = true;
checkTurn();
To look like
function checkClicks() {
console.log("random clicks: " + compSeq);
//if user guess is correct
if (userSeq[playerIndex] == compSeq[playerIndex]) {
if (userSeq[playerIndex].length == compSeq[playerIndex].length) {
// if they are then it's computer's turn
callComp();
} else {
playerIndex += 1;
$(".start")
.html("Next")
.show();
// user is right, he can continue inputting another clicks if the sequence has
turn=true;
checkTurn();
}
} else {
resetUserVariables(); // user is wrong
}
}
Hope this is what you're looking for.
I have a few problems that are stopping me from proceeding on my blackjack 21 game. First when I open the site in a browser my aceCard function is invoked which is only supposed to be called if you deal a 1 (an ace card). Below I have written some problems I noticed with my aceCard function.
When You get number 1 in the userArray then you will need to call aceCard(); in the console. Or at least I haven't got this to call automatically.
1.when number 1 is in position 0 in array javascript don't recognize the 1.
2.when number 1 is in position 1 in array aceCard function will work and change value to 1 to 11
3.when number 1 is in position 2 in array it see's value 1 in the array, but it won't change value 1 to 11. if array position 0 = 1 then it won't see position 2 in the array.
Any help would be great, I have no idea why this works differently depending where number 1 is positioned in the userArray.
var userArray = [];
var computerArray = [];
var a = userArray.indexOf(1);
function random_number() {
var randNum = Math.floor(Math.random() * 10 + 1);
return randNum;
}
document.getElementById('dealButton').onclick = function() {
userArray.push(random_number(), random_number());
computerDeal();
computerDeal();
calcTotal(userArray);
showMe(calcComputerTotal(userArray));
//cardMaker ();
//cardMaker ();
//inputMyCardValue ();
//inputMyCardValue ();
cardMaker(random_number());
cardMaker(random_number());
//inputMyCardValueComputer ();
//inputMyCardValueComputer ();
return userArray;
}
document.getElementById('hitButton').onclick = function() {
userArray.push(random_number());
//computerHit();
calcTotal(userArray);
showMe(calcComputerTotal(userArray));
cardMaker(random_number());
//inputMyCardValue ();
//cardMakerComputer ();
//inputMyCardValueComputer ();
return userArray;
}
if (userArray.indexOf(1)) {
aceCard();
}
function aceCard() {
if (userArray.indexOf(1)) {
var numberDesired = parseInt(prompt('You got an Ace card! Do you want it to equal 1 or 11?'));
if (numberDesired === 11) {
var a = userArray.indexOf(1);
userArray[a] = 11;
inputMyCardValue();
calcTotal(userArray);
};
};
}
function stay() {
//have computer try to get closest to 21 as posible
}
/*function cardMaker (number) {
var id = 'card' + ($('#cardTable').children().length + 1);
$("#cardTable").append('<div id="' + id + '" class="cardLook">' + number + '</div>');
}*/
function cardMakerComputer() {
var id = 'cardComputer' + ($('#computerCardValues').children().length + 1);
$("#cardTable").append('<div id="' + id + '" class="cardLook"></div>');
}
function inputMyCardValue() {
card1.innerHTML = userArray[0];
card2.innerHTML = userArray[1];
card3.innerHTML = userArray[2];
card4.innerHTML = userArray[3];
card5.innerHTML = userArray[4];
card6.innerHTML = userArray[5];
}
function cardMaker() {
var id = 'card' + ($('#cardTable').children().length + 1);
$("#cardTable").append('<div id="' + id + '" class="cardLook">' + userArray[$('#cardTable').children().length] + '</div>');
}
inputMyCardValue()
inputMyCardValue()
function inputMyCardValueComputer() {
card10.innerHTML = computerArray[0];
card20.innerHTML = computerArray[1];
card30.innerHTML = computerArray[2];
card40.innerHTML = computerArray[3];
card50.innerHTML = computerArray[4];
card60.innerHTML = computerArray[5];
aceCard();
}
function calcTotal(userArray) {
var total = 0;
for (var i = 0; i < userArray.length; i++) {
total += userArray[i];
}
}
function calcComputerTotal(computerArray) {
var total = 0;
for (var i = 0; i < computerArray.length; i++) {
total += computerArray[i];
}
return total;
}
function showMe(VAL) {
var total = calcComputerTotal(userArray);
total = document.getElementById('out2');
parent = total;
parent.innerHTML = VAL;
}
//Cumputer logic
function computerDeal() {
computerArray.push(random_number(), random_number());
}
/*function computerHit () {
if (calcComputerTotal(computerArray) <= 17) {
computerArray.push(random_number());
}
}*/
//when 1 is in position 0 in array javascript don't reconise the 1.
//when 1 is in position 1 in array aceCard function will work and change value to 1 to 11
//when 1 is in position 2 in array it see's value 1 in the array, but won't change value 1 to 11. if array position 0 = 1 then it won't see position 2 in the array.
body {
background-color: lightgrey;
}
#mainContainer {
margin: 0 auto;
padding: 15px;
}
#cardTable {
height: 240px;
width: 95%;
background-color: green;
border-radius: 5px;
margin: 15px 0 15px 0;
}
#computerCardValues {
height: 240px;
width: 95%;
background-color: green;
border-radius: 5px;
margin: 15px 0 15px 0;
}
#out2 {
margin-bottom: 5px;
}
.cardLook {
border: 1px solid black;
width: 120px;
height: 190px;
border-radius: 5px;
float: left;
margin: 20px;
padding: 5px;
background-color: #fff;
}
#card1,
#card2,
#card3,
#card4,
#card5 {
transform: rotate(180deg);
transform: rotate(0deg);
}
#cardComputer10,
#cardComputer20,
#cardComputer30,
#cardComputer40,
#cardComputer50 {
transform: rotate(180deg);
transform: rotate(0deg);
}
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="mainContainer">
<div id="wrapper">
<div id="out2">My total</div>
<button id="dealButton">Deal</button>
<button id="hitButton">Hit</button>
<button id="stayButton">Stay</button>
<div id="cardTable"></div>
</div>
<div id="computerWrapper">
<div id="computerTotal">Computer Total</div>
<div id="computerCardValues"></div>
</div>
</div>
Heading
You're not using indexOf correctly to test whether an element is in an array. It returns the index if the element is in the array, or -1 if it's not in the array. You can't use it as a boolean, because -1 is truthy -- the only falsey value it returns is when the element is in the first array element, because then it returns the index 0.
So if (userArray.indexof(1)) should be if (userArray.indexOf(1) != -1).
There's also no point in putting
if (userArray.indexOf(1)) {
aceCard();
}
in the top-level of the script. Nothing gets put into userArray until the user starts dealing cards. So you should only do that test in the code that runs when dealing a card.
Alright, so I have been killing myself over this for a while now. I simply want to take an XML response containing names from my arduino and then dynamically create buttons. Each button needs to say the name and have the name as its id for the GetDrink function to use to send back to the arduino. If anyone can give me some help, maybe some code to work off of it would be appreciated.
I am able to have a button call the CreateButton function to create more buttons which all work. But I need to dynamically create the buttons off of the XML response. Also, this has to be done strictly using JavaScript and HTML.
<!DOCTYPE html>
<html>
<head>
<title>The AutoBar</title>
<script>
// Drinks
strDRINK1 = "";
function GetArduinoIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
var count;
var num_an = this.responseXML.getElementsByTagName('alcohol').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("AlcStatus")[count].innerHTML =
this.responseXML.getElementsByTagName('alcohol')[count].childNodes[0].nodeValue;
}
}
}
}
}
request.open("GET", "ajax_inputs" + strDRINK1 + nocache, true);
request.send(null);
setTimeout('GetArduinoIO()', 1000);**strong text**
strDRINK1 = "";
}
function GetDrink(clicked_id)
{
strDRINK1 = "&" + clicked_id;
document.getElementById("AlcStatus").innerHTML = "Your " + clicked_id + " is being made";
}
function CreateButton(Drink_Name)
{
myButton = document.createElement("input");
myButton.type = "button";
myButton.value = Drink_Name;
placeHolder = document.getElementById("button");
placeHolder.appendChild(myButton);
myButton.id = Drink_Name;
myButton.onclick = function()
{
strDRINK1 = "&" + myButton.id;
document.getElementById("AlcStatus").innerHTML = "Your " + myButton.id + " is being made";
}
}
</script>
<style>
.IO_box {
float: left;
margin: 0 20px 20px 0;
border: 1px solid blue;
padding: 0 5px 0 5px;
width: 320px;
}
h1 {
font-size: 320%;
color: blue;
margin: 0 0 10px 0;
}
h2 {
font-size: 200%;
color: #5734E6;
margin: 5px 0 5px 0;
}
p, form, button {
font-size: 180%;
color: #252525;
}
.small_text {
font-size: 70%;
color: #737373;
}
</style>
</head>
<body onload="GetArduinoIO()" BGCOLOR="#F5F6CE">
<p> <center><img src="pic.jpg" /></center><p>
<div class="IO_box">
<div id="button"></div>
</div>
<div class="IO_box">
<h2><span class="AlcStatus">...</span></h2>
</div>
<div>
<button onclick="location.href='Edit_Bar.htm'">Edit Bar Menu</button>
<div>
</body>
</html>
Something like this?
var xml = "<items><alcohol>Bourbon</alcohol><alcohol>Gin</alcohol><alcohol>Whiskey</alcohol></items>";
var parser = new DOMParser();
var dom = parser.parseFromString(xml, "text/xml");
var alcohol = dom.querySelectorAll('alcohol');
function getDrink(event) {
alert(event.target.value);
}
function makeButton(value) {
var b = document.createElement('button');
b.innerHTML = value;
b.value = value;
b.id = value;
b.addEventListener('click', getDrink);
return b;
}
var list = document.getElementById('buttons');
for(var i = 0; i < alcohol.length; i++ ) {
var b = makeButton(alcohol[i].firstChild.nodeValue);
var li = document.createElement('li');
li.appendChild(b);
list.appendChild(li);
}
<ul id="buttons"></ul>