I am creating a chessboard with Javascript. I already managed to create the board itself, but I'm having trouble giving every field its fitting class (black or white).
I managed to correctly assign the classes for the first row, but am having trouble with the rest of the board. I know there are probably easier solutions to this.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 800px;
height: 800px;
background-color: white;
}
#board div{
width: 100px;
height: 100px;
float: left;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass("field white");
for(var i = 0; i < board.length * 8; i++){
if((i % 7) == 0 && i != 0){
$(".field")[i].className = "field black";
i++;
}
else if((i % 7) == 0){
i++;
}
$(".field")[i].className = "field black";
i++;
}
startGame();
}
function startGame(){
}
The current output:
You can cut down your initGame logic to just add white class when y and x are either both odd or both even. You can do this by y%2 == x%2. You won't need the extra for loop.!
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
if(y%2 == x%2)
{
cell.element.className = "field white";
}
else
{
cell.element.className = "field black";
}
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
startGame();
}
Not sure what other functionality you'd need, but for generating the board you could do something like this:
const md = () => document.createElement('div');
function makeBoard (container, length = 8) {
for ( let i = 0; i < length; i++) {
const row = md();
Array.from({length}).forEach(() => row.appendChild(md()));
container.appendChild(row);
}
}
makeBoard(document.getElementById('board'));
#board > div {
display: flex;
min-height: 32px;
}
#board > div > div {
flex: 0 0 32px;
background: tomato;
}
#board > div:nth-child(even) > div:nth-child(even) {
background: bisque;
}
#board > div:nth-child(odd) > div:nth-child(odd) {
background: bisque;
}
<div id="board"></div>
A solution with swapping array:
var colors = ['white', 'black'];
$("#board div").each(function(i) {
if((i % 2) == 0)
$(this).addClass(colors[0]);
else
$(this).addClass(colors[1]);
if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
colors = colors.reverse();
});
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass('field');
var colors = ['white', 'black'];
$("#board div").each(function(i) {
if((i % 2) == 0)
$(this).addClass(colors[0]);
else
$(this).addClass(colors[1]);
if([8,16,24,32,40,48,56,64].indexOf((i + 1)) > -1)
colors = colors.reverse();
});
// startGame();
}
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 400px;
height: 400px;
background-color: white;
}
#board div{
width: 50px;
height: 50px;
float: left;
box-sizing: border-box;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
Related
I am making a 4x4 wordle game, and I used js to make the squares and input letters. When I input letters they go top to bottom instead of left to right and I'm not really sure how to fix it. I don't know how to modify the key events to go from the first column to the second, this is the code that deals with it, but I don't know why it isn't working, i feel like the code that is affecting it is this, but im not sure
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
var gameHeight = 4; //number of guesses
var gameWidth = 4; //length of the word
var row = 0; //current guess (attempt #)
var col = 0; //current letter for that attempt
var gameOver = false;
var word = "RAAA";
window.onload = function() {
initialize();
};
function initialize() {
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
});
const instructionsToggle = document.getElementById("info");
const instructionsContainer = document.getElementById("instructions-container");
// Hide the instructions by default
instructionsContainer.style.display = "none";
// Show or hide the instructions when the button is clicked
instructionsToggle.addEventListener("click", () => {
if (instructionsContainer.style.display === "none") {
instructionsContainer.style.display = "block";
} else {
instructionsContainer.style.display = "none";
}
});
// Create the game board
for (let i = 0; i < gameHeight; i++) {
let row = document.createElement("div");
row.classList.add("row");
for (let j = 0; j < gameWidth; j++) {
let square = document.createElement("span");
square.id = i.toString() + "-" + j.toString();
square.classList.add("square");
square.innerText = "";
row.appendChild(square);
}
document.getElementById("board").appendChild(row);
}
// Listen for Key Press
document.addEventListener("keyup", (e) => {
if (gameOver) return;
if ("KeyA" <= e.code && e.code <= "KeyZ") {
if (col < gameWidth) {
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = e.code[3];
col++;
}
} else if (e.code == "Backspace") {
if (col > 0) {
col--;
let currsquare = document.getElementById(row.toString() + '-' + col.toString());
currsquare.innerText = "";
}
} else if (e.code == "Enter") {
update();
row += 1; // start new row
col = 0; // reset current index to 0 for new row
}
if (!gameOver && row == gameHeight) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
});
}
function update() {
let correct = 0;
for (let column = 0; column < gameWidth; column++) {
let currsquare = document.getElementById(row.toString() + '-' + column.toString());
let letter = currsquare.innerText;
// Is it in the correct position?
if (word[row*gameWidth + (column % gameWidth)] == letter) {
currsquare.classList.add("correct");
correct += 1;
} // Is it in the word?
else if (word.includes(letter)) {
currsquare.classList.add("present");
} // Not in the word
else {
currsquare.classList.add("absent");
}
}
if (correct == gameWidth) {
gameOver = true;
document.getElementById("congrats").style.display = "block";
}
if (!gameOver && row == gameHeight - 1) {
gameOver = true;
document.getElementById("answer").innerText = word;
}
}
this is the updated html
<html>
<head>
<title>Wordle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="wordle.css">
</head>
<body>
<h1 id="title">Wordle</h1>
<i id = "info" class="fas fa-info-circle"></i>
<i id="dark-mode-toggle" class="fas fa-circle"></i>
<hr>
<br>
<div id="board">
</div>
<br>
<div id="instructions-container">
<p>The goal is to guess the word </p>
</div>
<img id="congrats" src="https://res.cloudinary.com/mkf/image/upload/v1675467141/ENSF-381/labs/congrats_fkscna.gif" alt="Congratulations">
<script src="wordle.js"></script>
</html>
This is the updated css
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:white;
--text-color:black;
color: var(--text-color);
background-color: var(--background-color);
}
body.dark{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
--correct:#6baa64;
--background-color:black;
background-color: var(--background-color);
--text-color:white;
color:white;
}
hr {
width: 500px;
}
#title {
font-size: 36px;
font-weight: bold;
letter-spacing: 2px;
}
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
display: flex;
flex-wrap: wrap;
}
.square {
border: 2px solid lightgray;
width: 60px;
height: 60px;
margin: 2.5px;
color: black;
font-size: 36px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.correct {
background-color: var(--correct);
color: white;
border-color: white;
}
.present {
background-color: #C9B458;
color: white;
border-color: white;
}
.absent {
background-color: #787C7E;
color: white;
border-color:white;
}
#congrats {
display: none;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 250px;
}
#question{
position: fixed;
top: 10px;
right: 200px;
}
#info{
position: fixed;
top: 10px;
right: 300px;
}
You dont need display: flex; in board but you need to add display: flex; to row
#board {
width: 350px;
height: 420px;
margin: 0 auto;
margin-top: 3px;
}
.row {
display: flex;
}
I am trying to crrate a chessboard using HTML and JS. I'm using HTML tables for that purpose. but I'm not sure why but there is are empty spaces around each cells.
I've tried cell-spacing:0; but it doesn't seems to work.\
see the red background around cells.
Here is the code
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
I'm prefering javascript or css solutions to this. Thanks.
Set table.cellSpacing = 0; before adding the table to the document :
var table = document.createElement("table");
table.id = "board";
table.cellSpacing = 0;
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
width: 95vw;
cell-spacing: 0;
cell-padding: 0;
height: 95vw;
}
.div2 {
width: 95vw;
height: 95vw;
}
Just add border-collapse: collapse to your table CSS:
var table = document.createElement("table");
table.id = "board";
table.classList.add = "div2";
for (var i = 1; i < 9; i++) {
var tr = document.createElement('tr');
for (var j = 1; j < 9; j++) {
var td = document.createElement('td');
if (i % 2 == j % 2) {
td.className = "white";
} else {
td.className = "black";
}
tr.appendChild(td);
td.innerHTML += td.cellIndex + 1;
}
table.appendChild(tr);
}
document.body.appendChild(table);
* {
margin: 0;
padding: 0;
}
body {
background: red;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
overflow: scroll;
}
.black {
background: #769656;
}
.white {
background: #eeeed2;
}
table {
border: 2px solid red;
border-collapse: collapse;
width: 95vw;
height: 95vw;
}
td {
text-align: center;
}
.div2 {
width: 95vw;
height: 95vw;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>
I created a table derived from an array, but I don't understand how to create a function that will overwrite an object in my array when editing on the page. You can run the worker code.
There was an idea to give all the cells id by their key and then somehow create a function for editing them, but I can't do it. :(
window.onload = function() {
document.querySelector('.bottom_panel > .plus').addEventListener('click', plusRow);
document.querySelector('.bottom_panel > .minus').addEventListener('click', minusRow);
document.querySelector('.right_panel > .plus').addEventListener('click', plusСolumn);
document.querySelector('.right_panel > .minus').addEventListener('click', minusСolumn);
// document.querySelectorAll('td > #0_0').addEventListener('oninput', alert);
const tbody = document.querySelector("tbody")
// function alert() {
// alert("11")
// }
array = [
[1,2,3,4],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16]
];
let N = ''
let amountRow = array.length
newRow = []
let amountСolumn = array[0].length
console.log(amountСolumn)
function tableBuilder() {
tbody.textContent = ""
for (i = 0; i < array.length; i++) {
var tr = document.createElement('tr')
for (j = 0; j < array[i].length; j++) {
var td = document.createElement('td')
td.innerHTML = `<input id="` + i + `_` + j + `" type="text" value="` + array[i][j] + `">`
tr.appendChild(td)
}
tbody.appendChild(tr)
}
}
tableBuilder()
function plusRow() {
for (i = 0; i < array[0].length; i++) {
newRow.push('')
console.log(newRow)
}
array.push(newRow)
amountRow = array.length
console.log(array)
newRow = []
tableBuilder()
}
function minusRow() {
if (amountRow > 1) {
array.pop()
amountRow = array.length
console.log(amountRow)
} else {
alert("Nope!")
}
tableBuilder()
}
function plusСolumn() {
for ( i = 0; i < array.length; i++) {
array[i].push(N)
}
console.log(array)
amountСolumn = array[0].length
tableBuilder()
}
function minusСolumn() {
if (amountСolumn > 1) {
for ( i = 0; i < array.length; i++) {
array[i].pop()
}
amountСolumn = array[0].length
tableBuilder()
} else {
alert("Nope!")
}
}
}
// for (i = 0; i < array[0].length; i++) {
// rowNumber = array[i]
// for (k = 0; k < rowNumber.length; k++)
// point = rowNumber[k]
// console.log(rowNumber[k])
// tbody.innerHTML += `<div>` + point + `</div>`
// }
body {
display: flex;
justify-content: center;
margin: 20vh 0 0 0;
}
table {
border-collapse: collapse;
}
td {
text-align: center;
width: 100px;
height: 35px;
border: black 1px solid;
}
td:hover, input:hover {
cursor: pointer;
background: silver;
}
td:hover input {
cursor: pointer;
background: silver;
}
input {
margin: 1px 0 0 0;
border: none;
width: 90%;
height: 90%;
}
input:focus {
border: 1px #000 solid;
outline:none;
background: none !important;
}
button {
cursor: pointer;
width: 35px;
height: 20px;
}
.minus {
margin: 0 0 0 10px;
}
.bottom_panel {
display: flex;
justify-content: center;
margin: 20px 0 0 0;
}
.right_panel {
display: flex;
justify-content: center;
align-items: center;
margin: -3% 0 0 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="style.css" rel="stylesheet">
<title>Spreadsheet</title>
<script src="script.js"></script>
</head>
<body>
<div class="table">
<table>
<tbody>
</tbody>
</table>
<div class="bottom_panel">
<button class="plus">+</button>
<button class="minus">-</button>
</div>
</div>
<div class="right_panel">
<button class="plus">+</button>
<button class="minus">-</button>
</div>
<script src="script.js"></script>
</body>
</html>
<!--<tr>-->
<!-- <td><input class="input" type="text" value="1" readonly="true" ondblclick="this.readOnly='';"></td>-->
<!-- <td><input type="text" value="2"></td>-->
<!-- <td><input class="input" type="text" value="3"></td>-->
<!--</tr>-->
Hey I got a little problem thats been bugging me. I made myself a custom homepage for firefox with some basic html and bootstrap for my favorite sites.
I came across the p5 library(pretty cool for visuals) and now i got a nice looping animation and i want to set it as the background for my homepage. I've tried some div techniques and some css manipulation with no success. Any suggestions?
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Purple Rain</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href='style.css'>
<script src="p5.js" type="text/javascript"></script>
<script src="p5.dom.js" type="text/javascript"></script>
<script src="p5.sound.js" type="text/javascript"></script>
<script src="terrain.js" type="text/javascript"></script>
</head>
<body>
<div class = "container-fluid">
<aside>
<article>
<ul><h3>Reddit</h3>
<redditbutton>Reddit</redditbutton>
<redditbutton>Documentaries</redditbutton>
<redditbutton>History Porn</redditbutton>
<redditbutton>Learn Programming</redditbutton>
<redditbutton>lofihiphop</redditbutton>
<redditbutton>UnixPorn</redditbutton>
</ul>
</aside>
</ul>
</article>
</div>
</body>
</html>
[CSS]
body{
/*background-image: url("planet.gif");
background-repeat:no-repeat;
background-size:1440px;
animation-name: diagonal-slide;*/
}
redditbutton{
background-color: #e02c2c;
border-radius: 15px;
border: none;
color: white;
padding: 12px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 8px;
}
article{
background-repeat: no-repeat;
align-content: center;
}
ul {
font-family: monospace;
padding-left: none;
}
h3 {
font-family: monospace;
font-size: 12px;
}
a:link {
color: white;
background-color: transparent;
}
a:visited{
color:white;
}
aside{
padding-left: 0px;
}
[P5/JAVASCRIPT]
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/IKB1hWWedMk
// Edited by SacrificeProductions
var cols, rows;
var scl = 20;
var w = 1400;
var h = 1000;
var flying = 0;
var terrain = [];
function setup() {
createCanvas(900, 500, WEBGL);
cols = w / scl;
rows = h/ scl;
for (var x = 0; x < cols; x++) {
terrain[x] = [];
for (var y = 0; y < rows; y++) {
terrain[x][y] = 0; //specify a default value for now
}
}
}
function draw() {
flying -= 0.1;
var yoff = flying;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
xoff += 0.2;
}
yoff += 0.2;
}
background(0);
translate(0, 50);
rotateX(-PI/3);
fill(200,200,200, 150);
translate(-w/2, -h/2);
for (var y = 0; y < rows-1; y++) {
beginShape(TRIANGLE_STRIP);
for (var x = 0; x < cols; x++) {
vertex(x*scl, y*scl, terrain[x][y]);
vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
}
endShape();
}
}
Could you do, have your div container for the animation fixed, use z-index to set it behind anything, just make sure the background of any elements above it is transparent
.divclass{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO