Goal: I am trying to iterate through a series of checkboxes, and add an "id" to each elem with the value of the checkboxes sibling text value. i.e. inner text of .k-in
Recent attempt:
function addSelectors() {
const checks = document.querySelectorAll('.k-treeview-lines input[type="checkbox"]');
[].forEach.call(checks, function (checks) {
let knn = document.querySelectorAll('.k-treeview-lines input[type="checkbox"] ~ .k-in');
checks.id = knn.innerText;
});
}
HTML is a series of the below:
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input type="checkbox" tabindex="-1" id="undefined"
class="k-checkbox"><-- id here
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">I want this</span><---- this text
</div>
Do not want to load jQuery...
function addSelectors() {
const checks = document.querySelectorAll(
'.k-treeview-lines input[type="checkbox"]'
);
checks.forEach(function (checkbox) {
const textVal = checkbox.parentElement.nextElementSibling.innerText;
checkbox.setAttribute("id", textVal);
});
}
addSelectors();
<div class="k-treeview-lines">
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input
type="checkbox"
tabindex="-1"
id="undefined"
class="k-checkbox"
/>
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">tempID</span>
</div>
</div>
The item you are requesting is not actually the sibling, they don't share the same parent.
You could do something like this:
function addSelectors() {
const checks = document.querySelectorAll('input[type="checkbox"]');
checks.forEach(c => {
c.id = c.parentNode.nextElementSibling.innerText;
});
}
addSelectors();
<div class="k-mid">
<span class="k-checkbox-wrapper" role="presentation">
<input type="checkbox" tabindex="-1" id="undefined" class="k-checkbox">
<span class="k-checkbox-label checkbox-span"></span>
</span>
<span class="k-in">I want this</span>
</div>
Related
I am struggling with adding new "button" element into my "list". I was trying to append or someting els but doesn't work. It is not usual ul to li. If you ask why button parent it is form bootstrap list-group
UPDATE JS. IT is now adding "button but not corectlly.
<div class="list-group">
<button type="button" class="list-group-item">
<ul class="desc">
<li class="t-desc50">Add Device</li>
<li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
</ul>
</button>
<button type="button" class="list-group-item" id="new-item>
<ul class="desc">
<li class="t-desc">Lamp</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3"><label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label></li>
</ul>
</button>
<button type="button" class="list-group-item" id="new-item>
<ul class="desc">
<li class="t-desc">AC</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3"><label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label></li>
</ul>
</button>
</div>
JS
document.querySelector('.fa-plus').addEventListener('click', addItem
);
function addItem() {
var list = document.getElementById("list-group");
var li = document.createElement("button");
li.setAttribute('id', li);
li.appendChild(document.createTextNode(li));
list.appendChild(li);
}
If you want to add an element to the dom, you can use :
var element = document.createElement(tagName);
https://developer.mozilla.org/fr/docs/Web/API/Document/createElement
Then append your element.
You can add event listener to element, and add class before if you need.
Comment answer
The code you need is probably something like that :
function addItem() {
var list = document.getElementById('list-group')
//Button
var button = document.createElement('button');
button.classList.add("list-group-item");
//Ul
var ul = document.createElement('ul');
ul.classList.add("desc");
//li
var liFirst = document.createElement('li');
var liSecond = document.createElement('li');
var liThird = document.createElement('li');
liFirst.innerHTML = "Lamp"
liSecond.innerHTML = "5 kwH"
//Label
var label = document.createElement('label');
label.classList.add("switch");
var input = document.createElement('input');
input.type = 'checkbox';
var span = document.createElement('span');
span.classList.add("slider");
span.classList.add("round");
label.append(input)
label.append(span)
liThird.append(label)
ul.append(liFirst)
ul.append(liSecond)
ul.append(liThird)
button.append(ul)
list.append(button)
}
You need to pass the function as argument instead of calling it:
// wrong:
document.querySelector('.fa-plus').addEventListener('click', addElement());
// right:
document.querySelector('.fa-plus').addEventListener('click', addElement);
addEventListener expects a callback function, if you call the function first, you are sending the result of the function as argument, which is wrong.
You need to pass the addElement function instead, so the addEventListener calls it.
got it!
function addItem() {
var list = document.getElementById('list-group')
var button = document.createElement('button');
var ul = document.createElement('ul');
var liFirst = document.createElement('li');
var liSecond = document.createElement('li');
var liThird = document.createElement('li');
button.classList.add("list-group-item");
ul.classList.add("desc");
liFirst.classList.add("t-desc")
liSecond.classList.add("t-desc2")
liThird.classList.add("t-desc3")
liFirst.innerText = 'TV'
liSecond.innerText = '5kwh'
liThird.innerHTML = `<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>`
ul.append(liFirst)
ul.append(liSecond)
ul.append(liThird)
button.append(ul)
list.append(button)
}
There are several semantic errors in both the markup and the code. Firstly, <button type="button" class="list-group-item" id="new-item> misses the closing double quotes. Secondly, one should not use an id twice as the OP's example does with id="new-item. At third addEventListener misses its 3rd argument.
Besides that it will be hard if not impossible to capture any click event on the fa-plus classified <i/> element; one should use the whole button instead ... that's what a button is for.
Additionally one might rethink how to retrieve/query the structure one wants to add the new element to. I would suggest a more generic approach that retrieves the top most group parent from within the structure where the click event did occur, thus one can make use of more than just on list-group classified element.
Having sanitized the code the OP'S given example then might look similar to this ...
function getClosestParentByClassName(elm, className) {
while (elm && !elm.classList.contains(className)) {
elm = elm.parentNode;
}
return elm;
}
function addItem(evt) {
//console.log(evt.currentTarget);
var
groupParent = getClosestParentByClassName(evt.currentTarget, 'list-group'),
itemBlueprint = groupParent && groupParent.querySelector('.list-group-item.new-item'),
newGroupItem = (itemBlueprint && itemBlueprint.cloneNode(true)) || createDefaultItem();
//console.log(groupParent, itemBlueprint, newGroupItem);
if (newGroupItem) {
// do whatever needs to be done in order to place the right content into this structure.
groupParent.appendChild(newGroupItem);
}
}
getClosestParentByClassName(document.querySelector('.fa-plus'), 'list-group-item').addEventListener('click', addItem, false);
function createDefaultItem() {
var
renderContainer = document.createElement('div');
renderContainer.innerHTML = [
'<button type="button" class="list-group-item new-item">'
, '<ul class="desc">'
, '<li class="t-desc">#missing t-desc</li>'
, '<li class="t-desc2">#missing t-desc2</li>'
, '<li class="t-desc3">'
, '<label class="switch">'
, '<input type="checkbox">'
, '<span class="slider round"></span>'
, '</label>'
, '</li>'
, '</ul>'
, '</button>'
].join('');
return renderContainer.querySelector('button');
}
.as-console-wrapper { max-height: 100%!important; top: 0; }
<div class="list-group">
<button type="button" class="list-group-item">
<ul class="desc">
<li class="t-desc50">Add Device</li>
<li class="t-desc55"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></li>
</ul>
</button>
<button type="button" class="list-group-item new-item">
<ul class="desc">
<li class="t-desc">Lamp</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</button>
<button type="button" class="list-group-item new-item">
<ul class="desc">
<li class="t-desc">AC</li>
<li class="t-desc2">5 kwH</li>
<li class="t-desc3">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</button>
</div>
I have a method ForceNumeric that i want to apply to a input field. What i want is this: template_item_input[0].ForceNumeric();
My renderd HTML looks like this:
<div id="itemList">
<div class="ingress"></div>
<div id="itemListItem[0]" class="dataListItem first">
<span class="put-left startTimeSpan"></span>
<span class="put-left separator"></span>
<span class="put-left endTimeSpan"></span>
<span class="put-left ruleSpan"></span>
<span class="put-left valueItem">
<input id="template_item_input[0]_value_item" class="styledInput">
</span>
<span class="put-left unit"></span>
</div>
<div id="itemListItem[1]" class="dataListItem first">
<span class="put-left startTimeSpan"></span>
<span class="put-left separator"></span>
<span class="put-left endTimeSpan"></span>
<span class="put-left ruleSpan"></span>
<span class="put-left valueItem">
<input id="template_item_input[1]_value_item" class="styledInput">
</span>
<span class="put-left unit"></span>
</div>
</div>
In $( document ).readyi'm doing this. this.id is equal to template_item_input[0] but value is a empty object object[]
$("#carbList").children(".carbListItem").each(function () {
var value = $(this.id).find('.put-left.valueItem');
var inp = $(value).find('input');
$(inp).ForceNumericOnly();
}),
What am i doing wrong?
this.id will return id of the clicked element. Use $(this) or $('#'+this.id) instead of $(this.id).
$(#YOUR_ID) is a valid selector for to get element having id as YOUR_ID. $(YOUR_ID) will return elements having tag as YOUR_ID => <YOUR_ID>
You do not need to wrap value in jQuery wrapper. It is already $ wrapped object.
I have a folowing problem.
On click button Filter I want get entries with selected city.
SO forbid me write big code, so I show only div with data. I think you can add select with options, if you want.
(Select id = "cityFilter" , options: Dnepr, Kharkiv, Lviv)
HTML:
<div id="data">
<div>
<a class="userEmail" href="#">user1#domain.ua </a>
<span> user1 </span>
<span> Dnepr </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#">user2#domain.ua </a>
<span> user2 </span>
<span> Kharkiv </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user3#domain.ua </a>
<span> user3 </span>
<span> Lviv </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user4#domain.ua </a>
<span> user4 </span>
<span> Dnepr </span>
<span><input type = "button" value = "x" /></span>
</div>
<div>
<a class="userEmail" href="#"> user5#domain.ua </a>
<span> user5 </span>
<span> Lviv </span>
<span><input type = "button" value = "x" /></span>
</div>
</div>
cityFilter.js (The description of the code in comments):
$(function() {
//click on button
$('body > input').on('click', function() {
//get selected value
var cityFilter = $('#cityFilter').val();
//sort out spans which contains city names
$('#data > div > a + span + span').each(function() {
//for check the received value
console.log($(this).text());
//compare selected value and span text
if ($(this).text() != cityFilter) {
console.log('true');
}
});
});
});
I got all true. Where is the problem ?
your spans have leading and trailing spaces
i.e. " abc " != "abc"
try the following instead:
if ($(this).text().trim() != cityFilter) {
console.log('true');
}
I tried to get element's values in div with button click and bring div's values into input box.
and I tried this:
window.onload = function () {
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(this).val();
$('#val_input').val(getinfo);
});
};
this is my example.html
<input id="val_input">
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name1</h1>
<span class = 'SA'>info1-1</span>
<span class = 'SB'>info1-2</span>
<span class = 'SC'>info1-3</span>
<button type = "submit" class = "submit_btn">submit</button>
</div>
<li>
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name2</h1>
<span class = 'SA'>info2-1</span>
<span class = 'SB'>info2-2</span>
<span class = 'SC'>info2-3</span>
<button type = "submit" class = "submit_btn">submit</button>
</div>
<li>
...
I'm also tried to put one value in input box like this:
window.onload = function () {
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(".SA").val();
$('#val_input').val(getinfo);
});
};
but it dosen't work.
I 'm very new to JS and Jquery so can't get a clue how to solve & where am I missing...
Try this
check this link
<input id="val_input">
<li class= 'CA'>
<div class= 'DA'>
<h1 id = 'HA'>name2</h1>
<span class= 'SA'>info2-1</span>
<span class= 'SB'>info2-2</span>
<span class= 'SC'>info2-3</span>
<button type= "button" class="subimit">submit</button>
</div>
<li>
$(document).ready(function(){
$('.subimit').click(function(){
var getinfo = $(this).prevAll(".SA").text();
$('#val_input').val(getinfo);
});
});
You need to use .text() instead of .val(). you will also need current clicked element context to target sibling span text:
$('.DA').on('click', '.submit_btn', function () {
var getinfo = $(this).prevAll(".SA").text();
$('#val_input').val(getinfo);
});
$(document).on('click', '.subimit_btn', function() {
var getinfo = $(this).text();
$('#val_input').attr('value', getinfo);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="val_input">
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name1</h1>
<span class = 'SA'>info1-1</span>
<span class = 'SB'>info1-2</span>
<span class = 'SC'>info1-3</span>
<button type = "submit" class = "subimit_btn">submit</button>
</div>
<li>
<li class = 'CA'>
<div class = 'DA'>
<h1 id = 'HA'>name2</h1>
<span class = 'SA'>info2-1</span>
<span class = 'SB'>info2-2</span>
<span class = 'SC'>info2-3</span>
<button type = "submit" class = "subimit">submit</button>
</div>
<li>
<div id="list1" class="dropdown-check-list"> <span class="anchor">Select State</span>
<ul class="items" data-bind="foreach:carTypes" onchange="GetSelectedValut1()">
<li>
<label>
<input id="items1" type="checkBox" /><span id="vv1" data-bind="text:text,value:text"></span>
</label>
</li>
</ul>
</div>
Want all the values of the cartypes when i check the box. geting only one (top most one) value here.
Here is my javascript code:
function GetSelectedValut1() {
if (document.getElementById('items1').checked) {
var list_value = document.getElementById("vv1").value;
document.getElementById("vall1").innerHTML = list_value;
} else document.getElementById("vall1").innerHTML = "";
}
want all the values of the cartypes when i check the box. geting only one(top most one) value here. my event to get the values is it sufficient here.