Menu
Community /Pin to ProfileBookmark
@cootheadAug 10.2019 — #Hi there pavel256,
here is an example for you to play with...
_coothead_
Homework
The user can enter up to 6 letters in INPUT, when he presses PLAY the word will be displayed letter after letter (setinterval 500), please help me
**i stucked
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<script>
var timer;
window.onload = function () {
id_h2.innerHTML = id_input.value;
timer = setInterval(add1, 500);
}
function add1() {
id_h2.innerHTML = id_input.value;
if (id_input.value >= 9) {
clearInterval(timer);
}
}
</script>
</head>
<body align=center>
<h1>Enter World:</h1>
<h2 id=”id_h2″></h2>
<input type=”text” id=”id_input”><br><br>
<input type=”button” value=”start” onclick=””>
</body>
</html
Sign in
to post a comment1 Comments(s) ↴
0
@cootheadAug 10.2019 — #Hi there pavel256,here is an example for you to play with...
``<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
#game {
max-width: 12em;
padding: 2em;
margin: 1em auto;
border: 1px solid #999;
border-radius: 0.75em;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.4 ),
0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
background-color: #fff;
}
#game label {
display: block;
font-size: 1.25em;
font-weight: bold;
text-align: center;
}
#game input {
display: block;
width: 100%;
margin: 1em auto;
font-size: 1em;
letter-spacing: 1px;
}
#game input[disabled] {
background-color: transparent;
border-color: transparent;
font-weight: bold;
text-align: center;
}
#game input[type=button],
#game input[type=reset]{
width: auto;
}
</style>
</head>
<body>
<form action="#" id="game">
<label for="text-in">Enter Word:</label>
<input type="text" disabled id="text-out">
<input type="text" maxlength="10" placeholder="maximum ten letters" id="text-in">
<input type="button" value="start" id="start">
<input type="reset" id="clear">
</form>
<script>
(function( d ) {
'use strict';
var test = true, c = 0, sto, delay = 1000,
tin = d.getElementById( 'text-in' );
d.getElementById( 'game' ).reset();
d.getElementById( 'start' ).addEventListener( 'click',
function() {
if ( test === true && tin.value !=='' ) {
typeText();
test = false;
}
}, false );
function typeText() {
d.getElementById( 'text-out' ).value +=
tin.value.charAt( c );
if ( c < tin.value.length ) {
c ++;
sto = setTimeout( typeText, delay );
}
else {
clearTimeout( sto );
}
}
d.getElementById( 'clear' ).addEventListener( 'click',
function() {
test = true;
c = 0;
}, false );
}( document ));
</script>
</body>
</html><i>
</i>``_coothead_