...

View Full Version : How to link arrow key to code



scodger
10-30-2012, 04:11 AM
This is my code, i need to link arrow keys to be able to select a "Smash" or "Dash" . this is my code

<!doctype html>
<head>
<style>
body {
background-color: hotPink;
background-image: "bground.jpg";
text-align: center;
}

section {
width: 40%;
display: inline-block;
}

button {
color: #444;
background-color: #B5B198;
border: 1px solid #999;
border-radius: 6px;
background-clip: padding-box;
font-weight: bold;
font-size: 5em;
margin: 20px;
text-shadow: -1px -1px #ccc;
cursor: pointer;
}

img {
border: 0;
}

.score {
color: white;
font-size: 2em;
font-family: sans-serif;
}

.copyright-amirite {
color: #FF3399;
}

</style>
</head>
<body onload="displayGirl();" >


<div>
<img id="image" height=500 width=350>
</div>

<section id="smash">
<p class="score">0</p>
<button>SMASH!</button>
</section>
<section id="dash">
<p class="score">0</p>
<button>Dash!</button>
</section>

<script>
var count;
var choice;
var images = [];
var image = document.getElementById( "image" );
var smash = document.getElementById( "smash" );
var dash = document.getElementById( "dash" );

for ( count = 0; count < 310; count++ ) {
var string = "/graphic (COUNT).jpg";
images[ count ] = string.replace( "COUNT", count );
}

function chooseRandom( range ) {
return Math.floor( Math.random() * ( images.length - 1 ) );
}

function displayGirl() {
choice = chooseRandom( images.length );
image.src = images[ choice ];
}

function update() {
var button = this;
var score = button.previousElementSibling;
score.innerHTML = +score.innerHTML + 1;
displayGirl();
}

[ smash, dash ].forEach(function( section ) {
var button = section.children[1];
button.addEventListener( "click", update, false );
});

</script>

WolfShade
10-30-2012, 02:33 PM
Please enclose your code between code tags. Easier to read.

This is not the forum to ask questions. This is for posting scripts that already work and others might find useful. I'm sure a moderator will move this post, at some point. Just a heads-up.

I see you using jQuery code, but I don't see you loading jQuery.

VIPStephan
10-30-2012, 02:52 PM
Moved to appropriate forum.

WolfShade, where do you see the OP use jQuery?

WolfShade
10-30-2012, 03:22 PM
I could be wrong. The following _looked_ like jQuery code, to me:


[ smash, dash ].forEach(function( section ) {
var button = section.children[1];
button.addEventListener( "click", update, false );
});


But I'm not fully awake. A closer look, and I realize, now. Caffeine.. IV drip.. stat!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum