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>
Related
I have some product list on my page
I need to run all products and get id (article) and name of product
ID need get from data-id into ".eshop_js-add-to-cart"
Name need to get from ".eshop-item-v2-title"
Needed after click on CartButton take data-id from clicked button, not the first and take his name
var CartButton = document.querySelectorAll(".eshop_js-add-to-cart");
CartButton.forEach((item) => {
item.onclick = function () {
console.log("addToCart works");
var NameProductList = document.querySelector(".eshop-item-v2-title").textContent;
var ProductIdList = document.querySelector('.eshop_js-add-to-cart');
var ProductIdCountList = ProductIdList.getAttribute('data-id');
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'addToCart',
ecommerce: {
add: {
actionField: { list: 'category' },
products: [{
name: NameProductList,
id: ProductIdCountList,
}]
}
}
});
console.log("dataLayer works");
};
});
<div class="eshop-item-v2-wrap" data-product-id="507">
<div class="product-card_interact-cont">
<div class="eshop-item-v2-buttons">
<div class="eshop_js-add-to-cart eshop_add-to-cart-btn" data-id="507">
<span class="eshop-item-v2-btn-label">Add to cart</span>
</div>
</div>
</div>
<span class="eshop-item-v2-title">Product 1</span>
</div>
<div class="eshop-item-v2-wrap" data-product-id="3347">
<div class="product-card_interact-cont">
<div class="eshop-item-v2-buttons">
<div class="eshop_js-add-to-cart eshop_add-to-cart-btn pressed js-done" data-id="3347">
<span class="eshop-item-v2-btn-label">Add to cart</span>
</div>
</div>
</div>
<span class="eshop-item-v2-title">Product 2</span>
</div>
Whats wng with the code?
Your selector quesries document.querySelector(".eshop-item-v2-title") and document.querySelector('.eshop_js-add-to-cart') will always return the first node having class eshop-item-v2-title and eshop_js-add-to-cart regardles of the button that you clicked.
Solution.
You can identify which button you clicked by using e.currentTarget insuide the clicke event listner. You can select the closest element with class eshop-item-v2-wrap which can be called as the container div with e.currentTarget.closest(".eshop-item-v2-wrap"). Your reired nodes can be targetted now by using this node. Simply by using parentNode.querySelector(".eshop-item-v2-title") and parentNode.querySelector('.eshop_js-add-to-cart') where parentNode is the result of selector e.currentTarget.closest(".eshop-item-v2-wrap")
var CartButton = document.querySelectorAll(".eshop_js-add-to-cart");
CartButton.forEach((item) => {
item.onclick = function (e) {
console.log("addToCart works", e.currentTarget);
const parentNode = e.currentTarget.closest(".eshop-item-v2-wrap");
var NameProductList = parentNode.querySelector(".eshop-item-v2-title").textContent;
var ProductIdList = parentNode.querySelector('.eshop_js-add-to-cart');
var ProductIdCountList = ProductIdList.getAttribute('data-id');
console.log('NameProductList', NameProductList);
console.log('ProductIdList', NameProductList);
console.log('ProductIdCountList', NameProductList);
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'addToCart',
ecommerce: {
add: {
actionField: { list: 'category' },
products: [{
name: NameProductList,
id: ProductIdCountList,
}]
}
}
});
console.log("dataLayer works");
};
});
<div class="eshop-item-v2-wrap" data-product-id="507">
<div class="product-card_interact-cont">
<div class="eshop-item-v2-buttons">
<div class="eshop_js-add-to-cart eshop_add-to-cart-btn" data-id="507">
<span class="eshop-item-v2-btn-label">Add to cart</span>
</div>
</div>
</div>
<span class="eshop-item-v2-title">Product 1</span>
</div>
<div class="eshop-item-v2-wrap" data-product-id="3347">
<div class="product-card_interact-cont">
<div class="eshop-item-v2-buttons">
<div class="eshop_js-add-to-cart eshop_add-to-cart-btn pressed js-done" data-id="3347">
<span class="eshop-item-v2-btn-label">Add to cart</span>
</div>
</div>
</div>
<span class="eshop-item-v2-title">Product 2</span>
</div>
I'm trying to create a to-do list app but i cant seems to append the user data to my list
html:
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
separate javascript file:
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode('inputTask');
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
inputTask is variable containing the text value but you using that as if it is string, remove the quotes around it.
I will also suggest you to avoid inline event handler, you can use addEventListener() instead like the following way:
document.getElementById('add-btn').addEventListener('click', newTask);
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask); //remove quotes here
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Try like this.
You should call newTask function and append child in it.
const inputTask = document.getElementById('input-task').value;
function newTask(){
var li = document.createElement('li');
var t = document.createTextNode(document.getElementById('input-task').value);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
document.getElementById('input-task').value="";
}
<div id="Html">
<input id="input-task" placeholder="New Task" >
<button id="add-btn" type="button" onclick="newTask()">
Add Tasks
</button>
</div>
<div>
<ul id="task-table">
<li>Task 1</li>
</ul>
</div>
Nothing wrong in your code!
Simple fixed this line
var t = document.createTextNode('inputTask');
Remove ('' quotes)
var t = document.createTextNode(inputTask);
And Final thing I don't know may be you have already done this but I want to mention this
Wrap this code inside the newTask() function
Example: -
function newTask(){
const inputTask = document.getElementById('input-task').value;
var li = document.createElement('li');
var t = document.createTextNode(inputTask);
li.appendChild(t);
document.getElementById('task-table').appendChild(li);
}
I am facing a problem within JavaScript when I attempt to delete a li, it will delete the entire ul. Does anyone know a solution for this?
const add = document.querySelector(".add");
add.addEventListener("click", function() {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
const text = document.createTextNode(input.value);
cont.append(newli);
newli.appendChild(text);
})
const remove = document.querySelector(".remove");
remove.addEventListener("click", function() {
const df = document.querySelector(".menu");
df.remove(newli);
})
<div class="parent-row">
<h1>Add a new Post </h1>
<div>
<input type="text" class="put">
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
</div>
</div>
</div>
Solution
HTML:
<div class="parent-row">
<h1>Add a new Post</h1>
<div>
<input type="text" class="put" />
<button class="add">Add a Post</button>
<button class="remove">Remove a Post</button>
</div>
<ul class="menu">
<li>Albenis</li>
</ul>
</div>
JavaScript:
const add = document.querySelector(".add");
const remove = document.querySelector(".remove");
add.addEventListener("click", function () {
const cont = document.querySelector(".menu");
const input = document.querySelector(".put");
const newli = document.createElement("LI");
newli.innerText = input.value;
cont.append(newli);
});
remove.addEventListener("click", function () {
const df = document.querySelector(".menu");
df.firstElementChild.remove();
});
Working example: https://codesandbox.io/s/pensive-almeida-z82lr?file=/index.html:262-561
Your error
Your error was you were trying to get the newli constant from outside of its code block remember that const variables are scoped to there block.
A different way of doing this
This way is a bit more simplified and allows you to delete anyone of the posts not just the last added.
const postBtn = document.querySelector('#post')
const list = document.querySelector('#list')
postBtn.addEventListener('click', () => {
const text = document.querySelector('#post-text')
list.innerHTML += `<li>${text.value} <button id="remove" onclick="remove(event)">remove</button></li>`
text.value = ''
})
const remove = (e) => {
e.target.parentElement.remove()
}
<div>
<h1>Make a post</h1>
<input id="post-text" type="text" placeholder="Text"><button id="post">Post</button>
<ul id="list">
</ul>
</div>
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>
I'm trying to learn JS and I decided to make a real app so that I can learn while I'm doing some stuff. I'm trying to make a TODO list app, I made the adding items but I can't figure out how to remove items when they got clicked.
Here's the code iteself:
MY TODO'S
<input id= "input" class="form-control" placeholder="Add items to your TODO list." type="text">
<button id="button" class="button btn btn-primary btn-block">Add</button>
<div class="items">
<ul id= "listGroup" class="list-group">
</ul>
</div> <!-- JS Items !-->
</div> <!-- End Div -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="app.js"></script>
JS:
var button1 = document.getElementById("button")
button1.addEventListener("click", addItem)
function addItem() {
let item = document.getElementById("input").value
let add = document.getElementById("listGroup")
let makeLi = document.createElement("li")
let makeText = document.createTextNode(item)
makeLi.className += "list-group-item"
let icon = document.createElement("i")
icon.className += "fa fa-times"
add.appendChild(makeLi).appendChild(makeText)
}
function revomeItem() {
}
var div1 = document.getElementById("div-01")
div1.addEventListener("click", removeItem);
function removeItem(e){
e.target.remove();
}
This should work..
makeLi.onclick = function(){
this.remove();
};