I have a problem with Javascript.
I read several of digits containing 1,X and 2 in an array. If I read a “”1″” from the array then a checkmark will be marked at the “1” column, read “X” from array a checkmark marked at “X” column, and read “2” checkmark at “2” column. The result with the checkmarks are marked in a table called “table”. See below.
How can I do this. Can anyone help me?
HTML-file:
“`
<body>
<span class=”checkmark”>
<div class=”stem”></div>
<div class=”kick”></div>
</span>
<main>
<table id=”table”>
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</table>
</main>
</body>
CSS-file:
“`
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.stem {
position: absolute;
width: 5px;
height: 11px;
background-color: green;
left: 11px;
top: 6px;
}
.kick {
position: absolute;
width: 5px;
height: 5px;
background-color: green;
left: 8px;
top: 12px;
}
Best regards
/Ashley
``<i>
</i><!DOCTYPE html>
<html>
<head>
<title>JS - Examination</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="assets/css/index.css" />
<link rel="shortcut icon" href="assets/img/fotboll.png" type="image/png">
<script src="assets/js/index.js" type="module"></script>
</head>
<body>
<span class="checkmark">
<div class="stem"></div>
<div class="kick"></div>
</span>
<header>
<h1>FOTBADSKOLLEN</h1>
<p class="smallLogo">FÖR DIG SOM SPARKAR BOLL</p>
</header>
<nav>
<ul>
<li id="active"><a href="#">stryket</a></li>
<li><a href="#">bänken</a></li>
<li><a href="#">korvmojjen</a></li>
<li><a href="#">lagen</a></li>
</ul>
</nav>
<main>
<h1>Stryk<img id="fotball" src="assets/img/fotboll.png"> tipset</h1>
<p>-först till 13rätt vinner!</p>
<hr />
<table id="table">
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</table>
</main>
<footer class="text-center">
<nav>
<ul>
<li><a href="#">Kontakta oss</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Rapportera fel</a></li>
</ul>
</nav>
<h2>TIPSA OSS</h2>
<p>
Vi är ständigt på jakt efter de senaste skvallren vad gäller fotbollsproffs och deras partners <br />
Har du ett tips eller kanske filmat något själv? <br />
Hör av dig via denna länken: <a href="#"> TIPSA OSS</a>
</p>
<hr />
<p>
Din väg från bänken rakt in i målet!<br>
&copy; Fotbadskollen
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
<p>
</footer>
</body>
</html><i>
</i>
`</CODE>
CSS code:
<CODE>
`<i>
</i>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
@font-face {
font-family: FjallaOne-Regular;
src: url("../fonts/FjallaOne-Regular.otf") format("opentype");
}
html {
background: url('../img/bg.jpg') #fff no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: Verdana;
color: #000;
}
header {
height: 100px;
color: #000;
text-align: center;
}
header p {
font-size: 4em;
width: 960px;
margin: 0 auto;
}
.smallLogo {
font-size: 2em;
font-style: italic;
}
nav {
margin-top: 60px;
background-color: rgba(255, 255, 255, 0.9);
height: 70px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
text-align: center;
}
ul {
padding-top: 25px;
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
margin-left: 40px;
}
a {
color: #000;
text-decoration: none;
}
#active a {
color: red;
}
a:hover {
text-decoration: underline;
}
main {
background-color: rgba(255, 255, 255, 0.9);
width: 960px;
margin: 40px auto 0 auto;
padding: 30px;
text-align: center;
}
main table {
margin: 0 auto;
width: 92%;
text-align: center;
}
main table tr td:first-child, main table tr th:first-child {
text-align: left;
}
#fotball {
opacity: 1;
}
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.stem {
position: absolute;
width: 5px;
height: 11px;
background-color: green;
left: 11px;
top: 6px;
}
.kick {
position: absolute;
width: 5px;
height: 5px;
background-color: green;
left: 8px;
top: 12px;
}
main hr {
margin: 40px;
}
main p {
padding-left: 250px;
}
.text-center {
text-align: center;
}
.text-bold {
font-weight: bold;
}
footer {
background-color: rgba(255, 255, 255, 0.9);
padding-bottom: 25px;
}
footer nav {
background-color: transparent;
}
footer hr {
max-width: 960px;
}
table {
text-align: left;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 0;
border-top: 1px solid #999999;
}
.red {
color: red;
}
h1, h2, nav, header {
font-family: FjallaOne-Regular;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 1.5em;
}
footer h2 {
color: red;
}<i>
</i>
``
<i>
</i><font color="green">&#10003;</font>
``<i>
</i>let outcome=['1','X','2','1','X','2','1','X','2','1','X','2','1,'];
for (let i=0;i<13;i++) {
if (outcome[i]=='1') {
let myPara = document.querySelector('.checkmark');
let col=document.createElement('td');
let textNode=document.createTextNode();
col.appendChild(textNode);
myPara.appendChild(col);
}
}<i>
</i>
``
const outcome = ['1','X','2','1','X','2','1','X','2','1','X','2','1'];
``<i>
</i> <table id="table">
<thead>
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</thead>
<tbody>
</tbody>
</table><i>
</i>
`</CODE>
And use this javascript:
<CODE>
`<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
// Provide body of table:
tbdy = document.querySelector('#table tbody');
// For each item in body:
outcome.forEach(item => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = '&#10003';
break;
case 'X':
varX = '&#10003';
break;
case '2':
var2 = '&#10003';
break;
}
// Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);<i>
</i>
``
``<i>
</i> // Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td class="checkmark">${var1}</td>
<td class="checkmark">${varX}</td>
<td class="checkmark">${var2}</td>
</tr>
;<i>
</i>
``
``<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
// Provide body of table:
tbdy = document.querySelector('#table tbody'),
// Get outer HTML of checkmark:
checkmark = document.querySelector('.checkmark').outerHTML;
// For each item in array outcome:
outcome.forEach(item => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = checkmark;
break;
case 'X':
varX = checkmark;
break;
case '2':
var2 = checkmark;
break;
}
// Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);
});<i>
</i>
``
``<i>
</i>for (let i=0;i<13;i++) {
let col=document.createElement('td');
let textNode=document.createTextNode([i+1]);
col.appendChild(textNode);
table.appendChild(col);
col=document.createElement('td');
let oLnk=document.createElement('a');
let oTxt=document.createTextNode([i]);
oLnk.href=Homepage1[i];
let o=oLnk.appendChild(oTxt);
document.getElementById('table').appendChild(oLnk);
let oLnk1=document.createElement('p');
let oTxt1=document.createTextNode(' -VS- ');
let o1=oLnk1.appendChild(oTxt1);
table.appendChild(o1);
let oLnk2=document.createElement('a');
let oTxt2=document.createTextNode([i]);
oLnk2.href=Homepage2[i];
let o2=oLnk2.appendChild(oTxt2);
document.getElementById('table').appendChild(oLnk2);
col=document.createElement('tr');
textNode=document.createTextNode('');
col.appendChild(textNode);
table.appendChild(col);
}<i>
</i>
``
``<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
homepage1 = [
'https://en.wikipedia.org/wiki/Main_Page',
'https://de.wikipedia.org/',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page'
],
// Provide body of table:
tbdy = document.querySelector('#table tbody'),
// Get outer HTML of checkmark:
checkmark = document.querySelector('.checkmark').outerHTML;
// For each item in array outcome:
outcome.forEach((item, idx) => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = checkmark;
break;
case 'X':
varX = checkmark;
break;
case '2':
var2 = checkmark;
break;
}
// Enter variables into template string
// First table cell contains a link
const row =
<tr>
<td><a href="${homepage1[idx]}">${idx + 1}</a></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);
});<i>
</i>
``
0.1.9 — BETA 5.2