If/Then statements with checkboxes (html) - javascript

I'm trying to create a Javascript if/then statement that goes along the lines of: if all of the checkboxes are checked then show this image, else show this other image. I'm completly stuck and not sure what to do...
<head>
<center>
<FONT FACE="LYDIAN,COMIC SANS MS,ARIAL" COLOR="#BDF6F4" SIZE="6"><MARQUEE LOOP="N"|"INFINITE" BGCOLOR="#E0BDF6" WIDTH="68%" HEIGHT="60" ALIGN="MIDDLE" HSPACE="4%" VSPACE="25">My To-Do List: Just Do It!</MARQUEE></FONT>
<p>
<span style="color:#937AF0">
Put 'To-Do' tasks in order according to priority, to add a new task simply click the add button. When task on list is completed, check done!
</p>
</center>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
</head>
<body>
<body style="background:#E6E6FA">
<center>
<table id="specialtable">
<table style="background:#BDF6F4">
<tr>
<th> Done</th>
<th>Priority</th>
<th>Task</th>
</tr>
<tr>
<td><input type="checkbox"</td>
<td>1<br></td>
<td><input type="text"></td>
<td><button onclick="addRow(this);">Add</button><br></td>
</tr>
</table>
</center>
<script type = "text/javascript">
function addRow(e)
{
var current = e.parentNode.parentNode; // <tr>...</tr>
var tnew = current.cloneNode(true);
var rowCount = current.parentNode.getElementsByTagName("tr").length;
tnew.getElementsByTagName("td")[1].textContent = rowCount;
current.parentNode.appendChild(tnew);
}
</script>
</head>
<body>

You could code:
var thisImage = document.getElementById('thisImage'),
thatImage = document.getElementById('thatImage'),
checkboxes = document.querySelectorAll('input[type=checkbox]'),
cLen = checkboxes.length;
function changeHandler() {
// compare the length of the checkboxes
// with the length of checked ones
var allChecked = Array.prototype.filter.call(checkboxes, function(e) {
return e.checked;
}).length === cLen;
if (allChecked) {
thisImage.style.display = 'block';
thatImage.style.display = 'none';
} else {
thisImage.style.display = 'none';
thatImage.style.display = 'block';
}
}
Array.prototype.forEach.call(checkboxes, function (e) {
e.addEventListener('change', changeHandler, false);
});

Refer this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function count(obj){
var x = document.getElementsByTagName("INPUT");
var y = [];
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "checkbox") y.push(x[cnt]);
}
var chkboxCount = y.length;
var cnt = 0;
for(var i=1; i<=chkboxCount; i++){
var checkbox = 'chk' + i;
if(document.getElementById(checkbox).checked){
cnt++;
}
}
if(cnt == 3){
document.getElementById('pic').innerHTML = '<img src = "img_flwr.gif">';
} else{
document.getElementById('pic').innerHTML = '<img src = "img_tree.gif">';
}
}
</script>
<input type="checkbox" name="chk1" id="chk1" onclick="count(this)">
<input type="checkbox" name="chk2" id="chk2" onclick="count(this)">
<input type="checkbox" name="chk3" id="chk3" onclick="count(this)">
<br>
<div id="pic"></div>
</body>
</html>

Related

How do I count checked checkboxes in list.js that are not currently displayed?

I have a table with checkboxes in list.js. I want to count all checkboxes that are checked, even those hidden due to the search function of the list. The method below works for only the checkboxes that are currently displayed after searching.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
<tbody class="list">
<tr>
<td class='name'>checkbox1</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count()">
</td>
</tr>
<tr>
<td class='name'>checkbox2</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count()">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var list_options = {
valueNames: ['name', 'checked'],
searchDelay: 500
};
var sample_list = new List('sample_rows', list_options);
sample_list.on('updated', update_count);
document.addEventListener("load", update_count());
function update_count(){
let total = sample_list.size();
let checked_count = 0;
let items = sample_list.items;
for (let i = 0; i < total; i++){
let item = items[i];
let checkbox_id = items[i]._values['name'];
let sample_checkbox = document.getElementById(checkbox_id);
if(sample_checkbox != null){
if (sample_checkbox.checked){
checked_count += 1;
}
}
else {
alert('Cannot find state of ' + checkbox_id);
}
}
document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
}
</script>
</body>
</html>
The state of checkboxes is preserved while searching, so the count should be available. This is illustrated by:
Check both checkboxes. Count is 2.
Search for "box2". Count is displayed as 1, with alert for the box that fails to get counted.
Clear search box. Count is 2 again because state of undisplayed checkbox is preserved.
How can I count all of the checked checkboxes when a search has been applied?
This code will keep your checked count intact whether your checkboxes are hidden or not
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
<tbody class="list">
<tr>
<td class='name'>checkbox1</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count('checkbox1')">
</td>
</tr>
<tr>
<td class='name'>checkbox2</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count('checkbox2')">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var checked_count = 0;
var list_options = {
valueNames: ['name', 'checked'],
searchDelay: 500
};
var sample_list = new List('sample_rows', list_options);
sample_list.on('updated', update_count);
document.addEventListener("load", update_count_on_load());
function update_count_on_load() {
let total = sample_list.size();
let checked_count = 0;
let items = sample_list.items;
for (let i = 0; i < total; i++) {
let item = items[i];
let checkbox_id = items[i]._values['name'];
let sample_checkbox = document.getElementById(checkbox_id);
if (sample_checkbox != null) {
if (sample_checkbox.checked) {
checked_count += 1;
}
} else {
alert('Cannot find state of ' + checkbox_id);
}
}
document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
}
function update_count(checkbox_id) {
let sample_checkbox = document.getElementById(checkbox_id);
if (sample_checkbox) {
if (sample_checkbox.checked) {
checked_count += 1;
} else {
checked_count -= 1;
}
}
document.getElementById('sample_count').innerHTML = checked_count + " selected";
}
</script>
</body>
</html>
I just wrote you a new logic for calculation:
do your count based on click, no need use list if im not mistaken for some reason, and save result in variable.
...
let res = 0
document.querySelectorAll("input[type=checkbox]").forEach(input => {
input.addEventListener("click", (e) => {
e.target.checked ? res = res + 1 : res = res - 1
document.getElementById('sample_count').innerHTML = res + " selected";
})
})
...
remove
document.getElementById('sample_count').innerHTML
from your function. To be fair not sure whats going on there, looks a bit to much for simple calculation.
let res = 0
document.querySelectorAll("input[type=checkbox]").forEach(input => {
input.addEventListener("click", (e) => {
e.target.checked ? res = res + 1 : res = res - 1
document.getElementById('sample_count').innerHTML = res + " selected";
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>Counting checked checkboxes</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<body>
<div id='sample_rows'>
<div id='sample_count'></div>
<input class="search" placeholder="Search" />
<table>
<tbody class="list">
<tr>
<td class='name'>checkbox1</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox1" id="checkbox1" onclick="update_count()">
</td>
</tr>
<tr>
<td class='name'>checkbox2</td>
<td class="checked">
<input class="sample_checkbox" type="checkbox" name="checkbox2" id="checkbox2" onclick="update_count()">
</td>
</tr>
</tbody>
</table>
</div>
<script>
var list_options = {
valueNames: ['name', 'checked'],
searchDelay: 500
};
var sample_list = new List('sample_rows', list_options);
sample_list.on('updated', update_count);
document.addEventListener("load", update_count());
function update_count() {
let total = sample_list.size();
let checked_count = 0;
let items = sample_list.items;
for (let i = 0; i < total; i++) {
let item = items[i];
let checkbox_id = items[i]._values['name'];
let sample_checkbox = document.getElementById(checkbox_id);
if (sample_checkbox != null) {
if (sample_checkbox.checked) {
checked_count += 1;
}
} else {
// alert('Cannot find state of ' + checkbox_id);
}
}
//document.getElementById('sample_count').innerHTML = String(checked_count) + " selected";
}
</script>
</body>
</html>

hide div if value is blank (javascript)

I am working on a phonebook. In html I have a div #containerAgenda which won't show if there are no added contacts. However, I created the function to delete a row or multiple rows. So if I add and then delete all contacts, I want the div to hide. I am not sure how to set the value to blank or empty so that I can apply the rule .classList.remove in the deleteRow function(I added the way I tried to define the input value as empty). Would you give me any hints? Below is my code:
P.S. I am quite a beginner so I appreciate non-complicated solutions :)
<script>
var persoane =[];
function deseneazaTabel(){
str = "";
for (var i = 0; i < persoane.length; i++){
str += `<tr>
<td>${persoane[i].name}</td>
<td>${persoane[i].telefon}</td>
<td><span class="editButton" onclick="editeaza();">EDIT</span></td>
<td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
</tr>`;
}
document.querySelector("table tbody").innerHTML=str;
}
var pers = {};
function adaugaContact(form,event){
event.preventDefault();
var inputs = form.querySelectorAll("input[name]");
for (var i=0; i<inputs.length; i++){
var a = inputs[i].getAttribute("name");
var v = inputs[i].value;
pers[a] = v;
}
persoane.push(pers);
document.querySelector("#containerAgenda").classList.remove("hidden");
deseneazaTabel();
}
function deleteRow (idx){
persoane.splice(idx,1);
if(document.querySelectorAll("input[name]").value === ""){
document.querySelector("#containerAgenda").classList.add("hidden");
}
deseneazaTabel();
}
</script>
<body onload="deseneazaTabel();">
<h1>AGENDA</h1>
<form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
<label for ="name">Nume</label>
<input type="text" name="name" id="name">
<label for="telefon">Telefon</label>
<input type="text" name="telefon" id="telefon">
<br/>
<input type="submit" class="btn" value="ADAUGA CONTACT">
</form>
<div id="containerAgenda" class="orangeText centerText hidden">
<table id="inputs">
<thead>
<tr>
<td>Nume</td>
<td>Telefon</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
What you need is if
(persoane.length === 0) {
document.getElementById('containerAgenda').style.display = 'none';
} else {
document.getElementById('containerAgenda').style.display = 'block';
}
inside deseneazaTabel function
I also added deleteAll functionality which was missing from your question please check demo
var persoane = [];
function deseneazaTabel() {
if (persoane.length === 0) {
document.getElementById('containerAgenda').style.display = 'none';
} else {
document.getElementById('containerAgenda').style.display = 'block';
}
str = "";
for (var i = 0; i < persoane.length; i++) {
str += `<tr>
<td>${persoane[i].name}</td>
<td>${persoane[i].telefon}</td>
<td><span class="editButton" onclick="editeaza();">EDIT</span></td>
<td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
</tr>`;
}
document.querySelector("table tbody").innerHTML = str;
}
function DeleteALL() {
persoane = [];
deseneazaTabel();
}
var pers = {};
function adaugaContact(form, event) {
event.preventDefault();
var inputs = form.querySelectorAll("input[name]");
for (var i = 0; i < inputs.length; i++) {
var a = inputs[i].getAttribute("name");
var v = inputs[i].value;
pers[a] = v;
}
persoane.push(pers);
document.querySelector("#containerAgenda").classList.remove("hidden");
deseneazaTabel();
}
function deleteRow(idx) {
persoane.splice(idx, 1);
if (document.querySelectorAll("input[name]").value === "") {
document.querySelector("#containerAgenda").classList.add("hidden");
}
deseneazaTabel();
}
<body onload="deseneazaTabel();">
<h1>AGENDA</h1>
<form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
<label for="name">Nume</label>
<input type="text" name="name" id="name">
<label for="telefon">Telefon</label>
<input type="text" name="telefon" id="telefon">
<br/>
<input type="submit" class="btn" value="ADAUGA CONTACT">
</form>
<input type="submit" class="btn" onClick="DeleteALL()" value="Delete ALL">
<div id="containerAgenda" class="orangeText centerText hidden">
<table id="inputs">
<thead>
<tr>
<td>Nume</td>
<td>Telefon</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
This can help you
function checkIfNoContact() {
if(document.querySelectorAll("tr").length <= 0 ) {
document.querySelector("#containerAgenda").classList.add("hidden");
} else {
document.querySelector("#containerAgenda").classList.remove("hidden");
}
}
You can Use jQuery
It will check if there wasn't any <tr> in <tbody>, then hides div#containerAgenda
I hope it works for you.
if ( $("#containerAgenda tbody").children().length == 0 ) {
$("#containerAgenda").hide();
}

remain same clicked checkbox result when page refreshing while highlighting table record

The following code is written to accomplish 2 function
1. highlight table record when checkbox is clicked
2. Keep results same eventhough the page refreshed
But with this code neither table record get highlighted or nor page keep result same when refreshed.
I posted the same question earlier also, Some people suggest me on localstorage. I tried with that also. But my knowledge is so poor that I couldn't understand the explanation given completely. A help would be highly appreciated as I have to submit this as my university assignment
<style>
#cb3.highlight .label {background-color:yellow;}
#cb2.highlight .label {background-color:green;}
#cb1.highlight .label {background-color:red;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
var checked = [];
$(document).ready(function() {
if (localStorage.getItem("checked") == null)
localStorage.setItem("checked", checked);
$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cb3.highlight .label ");
checked.push($(this).attr("cb3"));
} else {
$(this).parent().parent().removeClass("cb3.highlight .label ");
checked.remove($(this).attr("cb3"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});
var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
var itemAtIndex = $("#" + saved[i] + "");
itemAtIndex.click();
itemAtIndex.parent().parent().addClass("cb3.highlight .label ");
}
});
$(document).ready(function() {
if (localStorage.getItem("checked") == null)
localStorage.setItem("checked", checked);
$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cb2.highlight .label ");
checked.push($(this).attr("cb2"));
} else {
$(this).parent().parent().removeClass("cb2.highlight .label ");
checked.remove($(this).attr("cb2"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});
var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
var itemAtIndex = $("#" + saved[i] + "");
itemAtIndex.click();
itemAtIndex.parent().parent().addClass("cb2.highlight .label ");
}
});
$(document).ready(function() {
if (localStorage.getItem("checked") == null)
localStorage.setItem("checked", checked);
$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("cb1.highlight .label ");
checked.push($(this).attr("cb1"));
} else {
$(this).parent().parent().removeClass("cb1.highlight .label ");
checked.remove($(this).attr("cb1"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});
var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
var itemAtIndex = $("#" + saved[i] + "");
itemAtIndex.click();
itemAtIndex.parent().parent().addClass("cb1.highlight .label");
}
});
</script>
<div class="col-lg-10">
<table id="Table" border="1">
<tr id="cb1">
<td><input type="checkbox" name="cb1" value="y" /></td>
<td class=label>Click me</td>
</tr><tr id="cb2">
<td><input type="checkbox" name="cb2" value="y" /></td>
<td class=label>Click me</td>
</tr>
<tr id="cb3">
<td><input type="checkbox" name="cb3" value="y" /></td>
<td class=label>Click me</td>
</tr>
</table>
</div>
Few things that need to be fixed:
You have repeated same piece of code thrice, if you were doing that because 3 checkboxes, its not required. you have used a selector which will select all three checkboxes and attach the event handler for click.
you are adding classes wrong, just give the names classes to be added to 'addClass()' method
$(this).attr("cb3"), is wrong, you want to use $(this).attr("name").
<!DOCTYPE html>
<html>
<body>
<style>
#cb3.highlight.label {background-color:yellow;}
#cb2.highlight.label {background-color:green;}
#cb1.highlight.label {background-color:red;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
$(document).ready(function() {
var checked = [];
$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("highlight label");
checked.push($(this).attr("name"));
} else {
$(this).parent().parent().removeClass("highlight label ");
checked.remove($(this).attr("name"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});
if (localStorage.getItem("checked") !== null){
var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
$("[name='" + saved[i] + "']").trigger('click');
}
}
});
</script>
<div class="col-lg-10">
<table id="Table" border="1">
<tr id="cb1">
<td><input type="checkbox" name="cb1" value="y" /></td>
<td class=label>Click me</td>
</tr><tr id="cb2">
<td><input type="checkbox" name="cb2" value="y" /></td>
<td class=label>Click me</td>
</tr>
<tr id="cb3">
<td><input type="checkbox" name="cb3" value="y" /></td>
<td class=label>Click me</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
</body>
</html>

why my javascript code dosen't work(about search and filter bar)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>a1</title>
<link rel="stylesheet" href="a1.css" />
<script src="a1.js"></script>
</head>
<body>
<form id = "gallary" method="get" action="">
<div id="searchBox">
<input type="text" id="searchBar" placeholder="Search titles" />
<input type="submit" id="searchBtn" value="search" onclick="searchFunction()"/>
<select name="genre" id ="filterBar">
<option>Genre</option>
<option>Baroque</option>
<option>Mannerism</option>
<option>Neo-classicism</option>
<option>Realisim</option>
<option>Romanticism</option>
</select>
<input type="submit" id = "filterBtn" value="filter" onclick =
"filterFunction()" />
</div>
</form>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="05030.jpg"/></td>
<td>Death of Marat</td>
<td>David, Jacques-Louis</td>
<td>1793</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="120010.jpg"/></td>
<td>Potrait of Eleanor of Toledo</td>
<td>Bronzino, Agnolo</td>
<td>1545</td>
<td>Mannerism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="07020.jpg"/></td>
<td>Liberty leading the people</td>
<td>Delacroix, Eugene</td>
<td>1830</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="13030.jpg"/></td>
<td>Arrangement in Grey and Black</td>
<td>Whistler, James Abbott</td>
<td>1871</td>
<td>Realisim</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="06010.jpg"/></td>
<td>Mademoiselle Caroline Riviere</td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-classicism</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
enter code here
above is my HTML code.
the searchBar is for searcing titles(the second column of tbody), the filter is for filtering genres(the fourth column of tbody).
I want to search and filter some specific content form the table and use on-click to trigger my functions but it didn't work. Can anyone help me?
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementByTagName("tr");
var td;
var filter = document.getElementById("filterBar").value;
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[1];
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
You are setting the values of 'input', 'tbody','tr', and 'td' at the start of the script. These get evaluated when the script is loaded but destroyed when the the script file is finished loading. That is the "searchFunction" does not know about the values of these tags.
Consider the updated code: (see it in action at: Plunker)
<script type="text/javascript">
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
console.log(input);
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
var filter = document.getElementById("filterBar").value;
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
} // <-- Missing
}
</script>

Javascript writing into Table not working

I just decided to code a little html file which should create a multiplication table with integers from "start" to "end". Start and End are set before in a HTMl Form...
I can give 2 numbers as input and the tr and td elements are create but accessing them by ClassName and filling them with innerHTML does somehow not work.
Here is the Code:
<html>
<head>
<title>Das groà ¥ 1x1</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function malnehmen(Wert1, Wert2) {
Ausgabe = Wert1 * Wert2;
return Ausgabe;
}
function tabelle() {
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(i = start; i < end+1; i++) {
Reihe = document.createElement("tr");
att = document.createAttribute("class");
att.value = i + "a";
Reihe.setAttributeNode(att);
document.getElementById("Darein").appendChild(Reihe);
for(ii = start; ii < end+1; ii++) {
Feld = document.createElement("td");
att2 = document.createAttribute("class");
att2.value = malnehmen(i, ii);
Feld.setAttributeNode(att2);
Reihe.appendChild(Feld);
}
}
}
function ausfuellen() {
tabelle();
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(a = start; a < end+1; a++) {
alert("Hier denn?");
document.getElementsByClassName(a + "a").innerHTML = a.toString();
for(aa = start; aa < end+1; aa++) {
multi = malnehmen(a, aa);
alert("Angekommen");
document.getElementsByClassName(multi).innerHTML = multi.toString();
}
}
}
</script>
<body>
<FORM name="printer">
<TABLE>
<tr>
<td>Beginnt bei:</td>
<td>
<input type="number" name="anfang" size="3">
</td>
</tr>
<tr>
<td>Endet bei:</td>
<td>
<input type="number" name="ende" size="3">
</td>
</tr>
<tr>
<td>
<input type="button" name="wassolldas" value="Erstellen" onclick="javascript: tabelle();">
</td>
</tr>
</TABLE>
</FORM>
<br>
<TABLE id="Darein" border="1">
</TABLE>
</body>
Does anybody know what I did wrong?
I built in 2 alerts just to see if the javascript part reaches the for loop but there is no pop up in browser.

Categories