I'm doing a basic (becuse I'm not skilled and just like to play around bulidning small things to learn) database project, setting things by checking checkboxes. However, when trying to check a box and read if it is checked or not checked it always reads "null". I've tried .value, .innerHTML and .checked. Nothing gets me there. All I'm trying to do is to pick up the input (i.e. checked or not checked) with getElementById and store it in a var, and later on compare if the boolean is true och false to set the value in the databas accordingly.
function createSheet() {
var _container = document.getElementById("container");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
var valueOfId = document.getElementById("idString").checked;
Error messege: Cannot read property 'checked' of null.
EDIT: Thanks for the answers! I didn't show these lines since I didn't think they mattered that much, but I was wrong so here they are:
function createSheet() {
var _container = document.getElementById("container");
for (var i = 0; i < 4; i++) {
p = document.createElement("p");
spanBird = document.createElement("span");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "myCheck" + i;
checkbox.value = 0;
checkbox.checked = birds.birdList[i].seen;
spanBird.innerHTML = birds.birdList[i].name;
p.appendChild(spanBird);
p.appendChild(checkbox);
container.appendChild(p);
console.log(document.getElementById("myCheck" + i));
document.getElementById("myCheck" + i).addEventListener("click", readBox);
}
}
function readBox(){
getId();
theId = theId.substring(7);
console.log("idString: " + idString);
var valueOfId = document.getElementById("idString").checked;
}
and the HTML reads:
<section id="container">
</section>
/EDIT
Any suggestions?
Couple things:
You don't need document.getElementById, since you have checkbox already.
As stated by others, to use document.getElementById, you need to set a id to the checkbox Element. And you also need to add the element to the document.
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "idString"
console.log(checkbox.checked)
document.body.appendChild(checkbox)
console.log(document.getElementById("idString").checked)
Actually, it's not that the property checked is null, your parent object is null.
I mean, this part:
document.getElementById("idString")
is returning null, so it can't access the checked property.
You need to first set the element's id with this
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.setAttribute("id", "idString");
document.body.appendChild(checkbox)
var valueOfId = document.getElementById("idString").checked;
Then you should be able to access the value
In order to work you id first need create the attributes for your element like this.
You cant call by id if it isnt instantiate. Try out.
HTML
<div id="content"></div>
JAVASCRIPT
checkbox = document.createElement("input");
checkbox.setAttribute("id", "idString");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("value", "0");
var element = document.getElementById("content");
element.appendChild(checkbox);
var valueOfId = document.getElementById("idString").value;
console.log(valueOfId);
Related
I am a beginner in javascrit. I would like to write in a div according to the name of the form.
When I write in an input it works very well. But when I write in the div it does not work. Can someone show me how to write in the div according to the name of the form? i have this error Uncaught TypeError: Cannot read property 'innerHTML' of undefined .thank you.
var mycpt =1;
var coul = (200+(1+0.5)*mycpt*100);
var div = document.createElement("div");
div.setAttribute("class","title");
div.setAttribute("id",`title${mycpt}`);
div.setAttribute("style","background-color: silver;");
div.setAttribute("style","position: absolute;");
div.style.border ="1px solid blue";
div.style.width="100px";
div.style.height="200px";
div.style.top="300px";
div.style.left=coul+'px';
var x = document.createElement("FORM");
x.setAttribute("name","achille");
x.setAttribute("action", "#");
x.setAttribute("id", `chatformsss${mycpt}`);
x.style.position="relative";
x.style.top="70px";
var input1 = document.createElement("INPUT");
input1.setAttribute("type", "text");
input1.setAttribute("name", `usernamee${mycpt}`);
input1.setAttribute("id", `usernamee${mycpt}`);
input1.setAttribute("value","salut");
input1.style.width="98px";
var div1 = document.createElement("div");
div1.setAttribute("id", `messagesdzs${mycpt}`);
var input2 = document.createElement("INPUT");
input2.setAttribute("type", "text");
//input2.setAttribute("size", "11");
input2.setAttribute("id", `messagee${mycpt}`);
input2.setAttribute("placeholder", "Message");
input2.style.width="98px";
var submit = document.createElement("INPUT");
submit.setAttribute("type","submit");
input1.setAttribute("type","text");
submit.setAttribute("name","submit");
submit.setAttribute("value","Envoyer");
document.body.appendChild(div);
x.appendChild(input1);
x.appendChild(div1);
x.appendChild(input2);
x.appendChild(submit);
div.appendChild(x);
document.forms["achille"].elements[`messagesdzs${mycpt}`].innerHTML+="okokokok";
I was able to solve it really took me time here is the answer
document.forms["achille"].querySelector(div#messagesdzs${mycpt}).innerHTML+="okokokok";
div.setAttribute("id",`title${mycpt}`);
your var name is mycp without the T in the end
I want to make a JavaScript code that created dynamically a list of files that i have
in a specific folder on my server. This list will be presented when i press a button
and each object will have a checkbox. The selected items will then be downloaded with another submit button and I guess some PHP.
So far I used JavaScript code I found online to find the names of the files and then call another function to create the elements but no luck.
function createEl(var a){
var myDiv = document.getElementById("cboxes");
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = a;
myDiv.appendChild(checkBox);
myDiv.appendChild(label);
label.appendChild(document.createTextNode(a));
}
function foldlist(){
const testFolder = './xampp/htdocs/website1/uploads';
const fs = require('fs');
fs.readdir(testFolder, (err, files) => {
files.forEach(file => {
var a=file;
createEl(a);
});
})}
You are trying to pass the var JavaScript keyword as a part of your createEl() function parameter.
Just change this:
function createEl(var a){
....
}
To this:
function createEl(a){
....
}
And your function should work fine. Check the Code Snippet below and you'll see that the function above is creating input-boxes as it should:
/* JavaScript */
function createEl(a){
var myDiv = document.getElementById("cboxes");
var checkBox = document.createElement("input");
var label = document.createElement("label");
checkBox.type = "checkbox";
checkBox.value = a;
myDiv.appendChild(checkBox);
myDiv.appendChild(label);
label.appendChild(document.createTextNode(a));
}
btn.addEventListener("click", function(){ createEl("hello") });
<!-- HTML -->
<button id="btn">Create input-box</button>
<div id="cboxes"></div>
everything working as my desire but when I click on book room button it can not generate input field for me but its shows as [object HTMLFormElement] here is my code
function booking(roomBooking){
var f = document.createElement("form");
var in1 = document.createElement("input");
in1.type = "text";
in1.name = "user_name";
in1.id = "user_name1";
f.appendChild(in1);
document.getElementById("name").innerHTML=f;
}
I want to show form when I clicked on book room button.
Here you are:
You should just apply your f variable to "#name" element by using appendChild() function, because "f" it's an object and you cannot directly use it.
function booking(roomBooking) {
var f = document.createElement("form");
var in1 = document.createElement("input");
in1.type = "text";
in1.name = "user_name";
in1.id = "user_name1";
f.appendChild(in1);
document.getElementById("name").appendChild(f);
}
I used Javascript to dynamically add textbox in order for the user to add more items in one process. Here's the code that add textboxes:
<script type="text/javascript">
var quantity = document.getElementById('quantity');
var item = document.getElementById('item');
var serial = document.getElementById('serial');
var property = document.getElementById('property');
document.getElementById('add').onclick = function () {
var input = document.createElement('input'),
div = document.createElement('div');
input.type = "text";
input.setAttribute("name", "quant");
div.appendChild(input);
quantity.appendChild(div);
var input2 = document.createElement('input'),
div2 = document.createElement('div');
input2.type = "text";
input2.setAttribute("name", "items");
div.appendChild(input2);
item.appendChild(div);
var input3 = document.createElement('input'),
div3 = document.createElement('div');
input3.type = "text";
input3.setAttribute("name", "serno");
div.appendChild(input3);
serial.appendChild(div);
var input4 = document.createElement('input'),
div4 = document.createElement('div');
input4.type = "text";
input4.setAttribute("name", "proper");
div.appendChild(input4);
property.appendChild(div);
};
</script>
When the user clicks the "Add Text" button, one set (four textboxes) will appear. My problem is even if the user clicks and inputs data into those textbox, it will only insert one set of data (which was the last set of input). Its because of the "name" of the textbox are the same. How can I insert those multiple data? Or how can I set a unique name for the added textbox in order to insert them into the database?
You'll want to change the names with a [] appended to it. This will pass an array to the PHP on form submit.
input.setAttribute("name", "quant[]");
To get the values in PHP,
$quant_values = $_GET['quant']; // array of values
$value_one = $quant_values[0];
You will need to implement a loop to iterate through the values.
I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.