So the HTML has these elements, there can be a random number of them. I would simply like to create a check box, and add it to each element with the class name "username".
So when a new element with the class "username" gets created or when the page is opened. It'll add a check box to it.
Here's my script.
var chec = document.createElement("div"); //Creates the div..
chec.innerHTML = '<input type="checkbox" value="test">'; //Create checkbox
var addc = document.querySelector("span[class='username']") // username Element.
var i;
for (i = 0; i < addc.length; i++) {
chec += addc[i];
}
It doesn't add the check boxes. Can someone help me understand why and possibly help me with my script.
var addc = document.querySelectorAll("span.username") // Get all elements with class "username"
for (var i = 0; i < addc.length; i++) {
var div = document.createElement("div");
var check = document.createElement("input");
check.type = "checkbox";
check.value = "test";
div.appendChild(check);
addc[i].appendChild(div);
}
<span class="username"></span>
<span class="username"></span>
<span class="username"></span>
Related
//init function
function init() {
createTaskElements();
}
//create elements and add them to the unordered list
//set attributes
function createTaskElements() {
const arrChores = ["Walk the dog", "Set dinner table", "Load dishwasher", "Empy Dishwasher", "Clean dinner plates"];
for (var i = 0; i < arrChores.length; i++) {
var task = document.createElement("LI");
task.id = "task";
var input = document.createElement("INPUT");
input.type = "checkbox";
input.id = "chore";
var span = document.createElement("SPAN");
span.innerHTML = arrChores[i];
span.addEventListener("click", crossClick);
task.appendChild(input);
task.appendChild(span);
task.addEventListener("click", crossOut);
document.getElementById("itemsList").append(task);
}
}
//set the class name of the list item whenever it is clicked to completed
function crossOut() {
this.className = "completed";
}
function crossClick() {
}
W
hat I want to do when I click the span tag it checks the check box next to the element, but it isn't working.
I know the .checked method, but I'm not sure how I would get my function to work.
Replace
var span = document.createElement("SPAN");
span.innerHTML = arrChores[i];
with
const label = document.createElement("label");
label.textContent = arrChores[i];
label.htmlFor = input.id;
You don't need to add any Javascript behaviour to that label as it already comes with the functionality you ask for.
I am trying to make a javascript webextension that adds a couple numbers eg. "123" to the end of the inner text of a hyperlink text to each product on a shopping website, http://www.tomleemusic.ca
for example, if i go to this link, http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano
I want to add some numbers to the end of each product's name.
name of product and its nested hyperlink
so far, I have attempted the following code but it does not produce any results. Thanks for helping :)
var products= document.querySelector(".category-products, .products-
grid category-products-grid itemgrid itemgrid-adaptive itemgrid-3col
centered hover-effect equal-height");
var productslist = products.getElementsByClassName("item");
for (var i = 0; i < productslist.length; i++) {
productslist[i].getElementsByClassName("product-name").innerHTML =
productslist[i].getElementsByClassName("product-name").innerHTML +
"1234";
}
Your query is wrong and you should use querySelectorAll instead of querySelector for fetching all elements matching the query.
Below is the code required as per given site:
var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
var a = productsListLink[i];
var name = a.innerHTML || "";
name += "1234";
a.innerHTML = name;
a.setAttribute('title', name);
}
I guess I found what you needed.
var products = document.querySelector(".category-products .products-grid.category-products-grid.itemgrid.itemgrid-adaptive.itemgrid-3col.centered.hover-effect.equal-height");
var productslist = products.getElementsByClassName("item");
for (var i = 0; i < productslist.length; i++) {
var productName = productslist[i].getElementsByClassName("product-name")[0].firstChild;
productName.innerHTML = productName.innerHTML + "1234";
}
For some reason my bootstrap panels won't show the body text. I have set up all my elements via DOM Manipulation.
My panel header text displays properly, however my body text doesn't show up.
I also noticed that the bootstrap panel body content does not have any elements, just lines of text.
I have tried to add text elements to it but so far nothing has been working. Here is my code:
JS
var searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', function() {
var term = document.getElementById('term').value;
var matched = [];
for (var i = 0; i < hotelRooms.length; i++) {
if (hotelRooms[i].hotel.indexOf(term) !== -1) {
matched.push(hotelRooms[i]);
}
}
for (var i = 0; i < matched.length; i++) {
var roomResults = document.createElement('div');
roomResults.setAttribute('id', 'results');
roomResults.setAttribute('class', 'result-style');
var resultsArea = document.getElementById('results-area');
console.log(matched[i]);
var panelDefault = document.createElement('div');
panelDefault.setAttribute('class', 'panel-default');
var panelHeading = document.createElement('div');
panelHeading.setAttribute('class', 'panel-heading');
var panelBody = document.createElement('div');
panelBody.setAttribute('class', 'panel-body');
var name = document.createElement('h3'); // Hotel Name
name.setAttribute('class', 'hotel-name');
name.textContent = matched[i].hotel;
var price = document.createElement('div'); // Room Price
price.setAttribute('class', 'room-price');
price.textContent = matched[i].price;
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
resultsArea.appendChild(roomResults);
}
});
You are never appending panelBody to panelDefault.
....
roomResults.appendChild(panelDefault);
panelDefault.appendChild(panelHeading);
panelHeading.appendChild(name);
panelBody.appendChild(price);
panelDefault.appendChild(panelBody);
....
You have just created a div, you need to append it to the body tag document.body.appendChild(size)
var size = document.createElement('div');
size.setAttribute('class', 'room-size');
size.textContent ="hello"
document.body.appendChild(size)
I have a implementation where I am creating radio buttons dynamically, actually all the fields and values are dependent on each other like parent- child -grand child and so on. I am able to remove button but in Firefox using innerHtml but in IE it didn't worked. For IE, I got a diffrent code but that also doesn't worked properly below I am pasting code that generates it and removes it.
var idToUpdate = "radioID";
var nameToUpdate = "radioName";
var labelToUpdate = "labelText";
var tbody = document.createElement('tbody');
var row = document.createElement("tr")
var data1 = document.createElement("td")
var newRadio = document.createElement("input");
newRadio.type = "radio";
newRadio.id = idToUpdate;
newRadio.name = nameToUpdate;
newRadio.value = labelToUpdate;
if (defUpdater == 1)
newRadio.setAttribute('checked', 'checked');
newRadio.setAttribute("onclick", "javascript:dependentFieldsValue('" + idToUpdate + "');");
var data11 = document.createElement("td")
var newLabel = document.createElement("label");
newLabel.htmlFor = idToUpdate;
newLabel.id = idToUpdate;
newLabel.appendChild(document.createTextNode(labelToUpdate));
tbody.appendChild(row);
row.appendChild(data1);
data1.appendChild(newRadio);
row.appendChild(data11);
data11.appendChild(newLabel);
Node1.appendChild(row);
defUpdater = 0;
For loop in last is used for removing radio, we just get htmlelemnt using table ID and set the innerHTML to="".
for (var i = 0; i < len; i++) {
var node = documnet.getElemtsById("tableID"); // every button group have table and table is havin id.
Node.childNodes[i].innerHTML = ""; /// works for firefox// works fine
//Node.childNodes[i].Node.removeChild(Node.childNodes[i]);// works for IE but not properly
}
Please suggest.
I would use this construction:
var table = documnet.getElemtsById("tableID");
for (var i = 0; i < len; i++) {
var tr = table.childNodes[i];
tr.parentNode.removeChild(tr);
}
I have these check boxes that are created with a javascript function:
I would like the text to appear to the right of the checkbox and all of the text to be on one line.
Here is the javascript function and the html:
function receiveAnswer(response) {
// var aSeats = document.getElementById("aSeats");
// aSeats.options.length = 0;// clear it out
//
// for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
// var option = aSeats.appendChild(document.createElement("option"));
// option.value = i;
// option.appendChild(document.createTextNode(response.aSeats[i]));
// }
var aSeats = document.getElementById("aSeats");
while (aSeats.childNodes.length > 0) { // clear it out
aSeats.removeChild(aSeats.childNodes[0]);
}
for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
var input = aSeats.appendChild(document.createElement("input"));
input.value = i;
input.type = "checkbox";
var br = aSeats.appendChild(document.createElement("br"));
input.appendChild(document.createTextNode(response.aSeats[i]));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
var br = aSeats.appendChild(document.createElement("br"));
}
}
html code:
<div name="aSeats" id="aSeats">
<input type="checkbox">
</div>
Why not use jQuery.
Check working example http://jsfiddle.net/FxgYz/
Create a separate div to put the text in and position that div to the side of the input box, something like:
var div = document.createElement("div");
div.style.width = 100;
div.innerHTML = text;
etc.