Develop Reference

Why page reloaded after the table is created by JavaScript

There is a dropdown list inside <div> element.
When an item in the dropdown list is clicked, a table should be created.
However, it is found that when the table is created, the page seems refreshed.
How to keep the result ?
<style>
#map {
margin: 10px 10px;
width: 560px;
height: 560px;
border: 1px solid #000000;
}
#dropdown_1 {
margin: 10px 10px;
position: absolute;
top: 0;
left: 600px;
width: 50px;
height: 10px;
/*border: 1px solid #000000;*/
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>
<div id = "dropdown_1" class="dropdown">
<button onclick="dropdown_toggle()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
</div>
</div>
<script src="myscripts.js">
</script>
<script>
// document.addEventListener('keypress', logKey);
set_drop_down_list();
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function dropdown_toggle() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
// console.log('hit-hit');
// creat_traffic_table();
}
}
}
}
</script>
In myscript.js :
function set_drop_down_list(){
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = './pic/mps.png';
img.onload = () => {ctx.drawImage(img, 0, 0);};
var select = document.getElementById("myDropdown");
var options = ["Ma Wan", "Kap Shui Mun", "North Fairway", "Ha Pang", "Fairway Junction"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("a");
el.textContent = opt;
el.value = opt;
el.setAttribute("href", "");
el.onclick = function(event) {
creat_traffic_table();
}
select.appendChild(el);
}
}
function create_traffic_table(){
var myArray = [
{'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
{'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
{'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
{'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
{'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
{'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]
const body = document.body;
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.position = 'absolute';
tbl.style.border = '1px solid black';
tbl.style.marginLeft = "800px";
tbl.style.marginTop = "50px";
for (var i = 0; i < myArray.length; i++){
var row = `<tr><td>${myArray[i].name}</td><td>${myArray[i].age}</td><td>${myArray[i].birthdate}</td></tr>`;
tbl.innerHTML += row;
}
body.appendChild(tbl);
}

I checked your code and I see, when looping, you added empty href attributes in every element in that dropdown menu, basically, you are telling them that when that element is clicked, refresh the page please.
el.setAttribute("href", "");
Remove that line, and you got yourself a fix to your problem.

How can I remove all borders from a group of elements except for the one created?

I'm trying to dynamically make all borders disappear except the newest created container's border I have tried the commented out section of the JavaScript. Can someone please provide an explanation/example of how this can be done?
function countButtonLinks() {
var elementGroups = document.getElementById('containsAll');
if(elementGroups.children.length == 0) {
var numID = 1;
}
if(elementGroups.children.length == 1) {
var numID = 2;
}
if(elementGroups.children.length == 2) {
var numID = 3;
}
if(elementGroups.children.length == 3) {
var numID = 4;
}
if(elementGroups.children.length == 4) {
var numID = 5;
}
if(elementGroups.children.length == 5) {
var numID = 6;
}
return numID;
}
function createContainer() {
if(document.getElementById('containsAll').children.length < 6) {
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
document.getElementById('containsAll').appendChild(elementA);
}
}
.containsAll {
width: 91%;
height: 75%;
position: absolute;
float: left;
margin-top: 1%;
margin-left: 1%;
background-color: transparent;
z-index: 91;
border: 1px #000000 solid;
border-radius: 7px;
padding: 5px;
}
.elem1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
border: 1px #333333 solid;
border-radius: 5px;
}
.elemInner1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
padding: 5px;
}
.buttonClass {
width: 100px;
height: 50px;
}
<button class="buttonClass" type="button" onclick="createContainer();">Click Me</button>
<div id="containsAll" class="containsAll"></div>
Please, no JQuery.

function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
// you don't need to use 'var numID'
return elementGroups.children.length + 1;
}
function createContainer(){
if(document.getElementById('containsAll').children.length < 6){
// add code here
for(var i=0;i<document.getElementById('containsAll').children.length;i++){
document.getElementById('containsAll').children[i].style.border = '0 none';
}
var elementA = document.createElement("span");
//...

Simply call the existing children of the element and remove the border before inserting
another element:
function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
var groupLength = elementGroups.children.length;
return groupLength++;
}
function createContainer() {
var containsAll = document.getElementById('containsAll'),
childrenLength = containsAll.children.length;
if (childrenLength >= 6) {
return; // Bail immediately since we only need to add a new element if the children's length is less than 6
}
// Call previous children
for ( var i = 0; i < childrenLength; i++ ) {
let child = containsAll.children[i];
// You can add a new class here that will remove the border
// but in this example, we'll use the style attribute to remove the border
child.style.border = 0;
}
// Now, add the new element
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
containsAll.appendChild(elementA);
}
Also, if you're going to use an element multiple times inside a function, make it a habit to store that element in a variable so you don't repeatedly calls the document.getElementById function.

You can accomplish this using the CSS :last-child selector
var container = document.getElementById('container');
function count_button_links()
{
return container.children.length + 1;
}
function new_container()
{
if (count_button_links() > 6) return false;
let span = document.createElement('span');
span.id = 'el_' + count_button_links();
span.className = 'box';
container.appendChild(span);
}
#container {
width: 100%;
background-color: transparent;
border: 1px solid #000;
border-radius: 7px;
padding: 5px;
display:flex;
height:200px;
}
.box {
flex:0 0 100px;
height:60px;
background-color: transparent;
border-radius: 5px;
}
.box:last-child{
border:1px solid #333;
}
button {
width: 100px;
height: 50px;
}
<button type="button" onclick="new_container();">Click Me</button>
<div id="container"></div>

table cell height is bigger than it's width (but set the same number for both)

I'm trying to put a grid (table) on a div using Javascript. The div has a width of 600px and a height of 400px. Every cell of the table is 20x20px. But the height of cells is bigger than their width. Why's that? And how to fix that?
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 600px;
height: 400px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>

Your cells are rescaling because you have set a fixed height and width for the container #workspace.
In a table, explicit cell widths and heights are always overridden by the table size as a whole.
If you insist on setting a width then ensure the correct calculation is used.
In this case the width is 631px. (30 right borders and 1 left).
I believe your failed to account for the 1px border in your sum.
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 631px;
height: 421px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>

Just add box-sizing: border-box; to your cells:
border-box The width and height properties include the content, padding, and border, but do not include the margin. Note that padding
and border will be inside of the box.
var htmlElements = "";
for (var r = 0; r < 20; r++) {
htmlElements += '<tr class="tRow">';
for (var c = 0; c < 30; c++) {
htmlElements += '<td class="tCell"></td>';
}
htmlElements += '</tr>'
}
var theTable = document.getElementById("tab");
theTable.innerHTML = htmlElements;
#workspace {
position: absolute;
width: 600px;
height: 400px;
background-color: cadetblue;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0;
box-sizing: border-box;
}
td {
width: 20px;
height: 20px;
}
<div id="workspace">
<table id="tab">
</table>
</div>

bug IE 11 with overflow auto

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

Remove space between button cells in table

I have to create a table with button inside each cell. However, I cannot remove the white space between cells. Any idea to do it? Sorry for poor presentation. Please comment if any information required?
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>

There is a problem with the button's borders. First, you should set the buttons to display: block.
One simple solution is to explicitly set the button's height to the cell's height (20px). See this snippet:
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 20px;
width: 100%;
margin : 0;
padding : 0;
display: block;
}
<div id="table">
</div>
If you don't need the buttons' borders, removing them solves the problem too (I've added a hover color to help distinguish the buttons):
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
display: block;
border: none;
}
.table_but:hover {
background-color: yellow;
}
<div id="table">
</div>

If I understand correctly, you should use in your css:
// cellpadding
th, td { padding: 0px; }
// cellspacing
table { border-collapse: collapse; border-spacing: 0; } // cellspacing="0"
// valign
th, td { vertical-align: top; }
// align (center)
table { margin: 0 auto; }
Font: In HTML5, with respect to tables, what replaces cellpadding, cellspacing, valign, and align?

If I understood, you just need to set your "line-height" to 0, see the result.
var table = document.createElement('table');
table.className="table";
for (var i = 1; i < 5; i++){
var tr = document.createElement('tr');
for (var j = 1; j < 5; j++){
var td = document.createElement('td');
var but = document.createElement("BUTTON");
but.className = "table_but";
td.appendChild(but);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("table").appendChild(table);
table {
border-collapse: collapse;
border-spacing: 0;
}
tr{
padding: 0px;
margin: 0px;
}
td {
height: 20px;
width: 20px;
padding: 0;
margin: 0;
line-height: 0;
}
.table_but{
height: 100%;
width: 100%;
margin : 0;
padding : 0;
}
<div id="table">
</div>