Accessing Dynamically created elements and id in javascript

Accessing Dynamically created elements and id in javascript - javascript

I am learning javascript and trying to do this with pure javascript..
I have created an input which when user fill and click on "Add Input Text" it will wrap the text into li tags and also add close button on the each input and add the input content to the div under it, I am using following code..
I am unable to make the close button work which are on the right side of each list items...
Please help.. Thanks
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a#closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

you need to add a onclick event on your x link and pass the element as parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script>
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
var closeThis = document.getElementById("closebtn");
closeThis.addEventListener('click' , function(){
this.parentNode.remove();
});
function close_click(elem)
{
elem.parentNode.remove();
}
</script>
</body>
</html>
i added close_click function in javascript that is being called in every of your created close button.

Change closebtn from an id to a class, because ids must be unique.
You can then replace the closebtn click handler with a delegated event on document.body:
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
event.target will be the element that has been clicked.
Snippet
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme(){
if(inputDisplay.value == ""){
alert("please put something in the input field.");
}else
inputBox.innerHTML += "<li>" + inputDisplay.value + 'x</li>';
}
function clearInput(){
inputBox.innerHTML = "";
}
function delLast(){
if( inputBox.innerHTML === "") {
alert("There is nothing to delete");
}else{
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
document.body.addEventListener('click', function(event) {
if(event.target.className==='closebtn') {
event.target.parentNode.remove();
}
});
.container{min-height:400px;width:100%;background-color:#999;color:#fff;float:left}.input-container{padding:10px;background-color:#777;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}a.closebtn{background-color:#8B8B8B;float:right;padding:1px 3px;margin:0px;color:#fff;text-decoration:none}#input-box{list-style-type:none}#input-box li{color:#FFF;background-color:#404040;padding:5px;width:300px;margin:0px;float:left;clear:both;margin-bottom:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick = "clickme()">Add input text</button>
<button onclick= "clearInput()">clear Input Box</button>
<button onclick= "delLast()">Del Last</button>
</div> <!--input-container -->
<div id ="main-content-container">
<ul id= "input-box">
</ul>
</div> <!--input-box -->
<div class="array-div">
</div>
</div> <!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

You need to add the click handler after creating the close button
var inputBox = document.getElementById('input-box');
var inputDisplay = document.getElementById('input-display');
function clickme() {
if (inputDisplay.value == "") {
alert("please put something in the input field.");
} else {
//create a new li
var li = document.createElement('li');
//add the input text to it as text
li.appendChild(document.createTextNode(inputDisplay.value));
//create a new anchor
var a = document.createElement('a');
a.href = "#";
//since id of an element must be unique, use classname
a.className = 'closebtn';
//add the click handler
a.addEventListener('click', closeHandler);
//add the anchor to li
li.appendChild(a);
//add the li to the ul
inputBox.appendChild(li);
}
}
function closeHandler() {
this.parentNode.remove();
}
function clearInput() {
inputBox.innerHTML = "";
}
function delLast() {
if (inputBox.innerHTML === "") {
alert("There is nothing to delete");
} else {
var lastInputText = inputBox.lastChild;
lastInputText.remove();
}
}
.container {
min-height: 400px;
width: 100%;
background-color: #999;
color: #fff;
float: left
}
.input-container {
padding: 10px;
background-color: #777;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px
}
a.closebtn {
background-color: #8B8B8B;
float: right;
padding: 1px 3px;
margin: 0px;
color: #fff;
text-decoration: none
}
#input-box {
list-style-type: none
}
#input-box li {
color: #FFF;
background-color: #404040;
padding: 5px;
width: 300px;
margin: 0px;
float: left;
clear: both;
margin-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-learning</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="input-display">
<button onclick="clickme()">Add input text</button>
<button onclick="clearInput()">clear Input Box</button>
<button onclick="delLast()">Del Last</button>
</div>
<!--input-container -->
<div id="main-content-container">
<ul id="input-box">
</ul>
</div>
<!--input-box -->
<div class="array-div">
</div>
</div>
<!-- container -->
<!-- javascripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/backbone/backbone-min"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Related

How can i change attributes of appended <p> throught appended <button>

i want my "detail" button to show the text hidden through overflow but i don't know how to access it. I tried to access it through previousSibling and nextSibling of my button but it doesn't work. I also did it with querySelectorAll but it changes all of my appended "p" instead of just the one linked to the button i click on
let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y=1;
var addANote = function () {
let contenu = document.getElementById("saisie").value;
let resultat = document.getElementById("resultat");
var newP = document.createElement("p");
var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
newP.setAttribute("overflow", "hidden");
var bouton = document.createElement('button');
bouton.innerHTML ="Details";
newP.appendChild(newText1);
document.getElementById("result").appendChild(newP);
document.getElementById("result").appendChild(bouton);
bouton.addEventListener("click", function() {
bouton.previousSibling.setAttribute("overflow", "visible");
});
}
add.addEventListener("click", function() {
addANote();
y++;
})
add.onclick = function(event){
event.preventDefault()
};
#saisie {
height : 250px;
width: 75%;
}
p {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<title>PopUp</title>
<script src='popup.js' defer></script>
</head>
<body>
<div id="content">
<form>
<h1> Note Taker</h1>
<h2>Add a new note:</h2>
<p>Note: </p>
<textarea type="text" id="saisie" name="saisie" required minlength ="1" maxlength ="3000" size ="500"></textarea>
</br>
</br>
<button type="submit" id="addNote"> Ajouter une Note </button>
</form>
<br>
<br>
<div class="autoShowHide" id="result"></div>
</div>
</body>
</html>

Overflow isn't an attribute, it's a style.
You can revert on a second click by checking the current style of the element in an if statement.
let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y = 1;
var addANote = function() {
let contenu = document.getElementById("saisie").value;
let resultat = document.getElementById("resultat");
var newP = document.createElement("p");
var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
newP.style.overflow = "hidden";
var bouton = document.createElement('button');
bouton.innerHTML = "Plus Details";
newP.appendChild(newText1);
document.getElementById("result").appendChild(newP);
document.getElementById("result").appendChild(bouton);
bouton.addEventListener("click", function() {
let style = bouton.previousSibling.style;
if (style.overflow == "visible") {
style.overflow = "hidden";
bouton.innerHTML = "Plus Details";
} else {
style.overflow = "visible";
bouton.innerHTML = "Moin Details";
}
});
}
add.addEventListener("click", function(e) {
e.preventDefault();
addANote();
y++;
})
#saisie {
height: 250px;
width: 75%;
}
p {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<title>PopUp</title>
<script src='popup.js' defer></script>
</head>
<body>
<div id="content">
<form>
<h1> Note Taker</h1>
<h2>Add a new note:</h2>
<p>Note: </p>
<textarea type="text" id="saisie" name="saisie" required minlength="1" maxlength="3000" size="500"></textarea>
</br>
</br>
<button type="submit" id="addNote"> Ajouter une Note </button>
</form>
<br>
<br>
<div class="autoShowHide" id="result"></div>
</div>
</body>
</html>

How to reset my list in my searchbox with only html/css/javascript ( no jquery, etc)?

i have a searchbox with a dropdown menu that filters items from the list when you enter letters. My problem is that when i click the X button, it clears the searchbox like expected but it doesn't reset the list of items under the box. Example : if i type javascript we will see javascript under the box but when i click the X button, it will still be written javascript and not the initial list.
So is there any possible way that i can reset it to the initial list using javascript ? ( NOTE : i cannot use jquery or any frameworks)
Thanks a lot.
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
document.querySelector('.clearable').value = '';
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script src="search.js"></script>
</body>
</html>

You could just reuse the code you have, loop over all of the li elements and re-show them on the myFunction call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
input[type="button"] {
margin-left: -30px;
border: none;
background-color: transparent;
outline: none;
}
</style>
</head>
<body>
<div class="searchbox">
<input class="clearable" type="text" id="value" placeholder="Search" />
<input type="button" onclick="myFunction()" value="X">
<ul class="myList">
<li class="name">Javascript</li>
<li class="name">Java</li>
<li class="name">CSS</li>
<li class="name">Python</li>
<li class="name">C++</li>
</ul>
</div>
<script>
function filter() {
var value, myList, name;
value = document.getElementById("value").value.toUpperCase();
myList = document.querySelectorAll(".myList > li");
Array.prototype.forEach.call(myList, function(element){
name = element.innerHTML;
element.style.display = name.toUpperCase().indexOf(value) > -1 ? 'list-item' : 'none';
});
}
document.getElementById('value').addEventListener('keyup', filter);
function myFunction() {
var myList;
document.querySelector('.clearable').value = '';
myList = document.querySelectorAll(".myList li");
Array.prototype.forEach.call(myList, function(element){
element.style.display = 'list-item';
});
}
</script>
</body>
</html>

How can I have 2 actions within one form, one button?

I have a html form and one 'submit' button. I have two tabs that I want to do different things. One tab when submitting should go to one link, whereas the other tab should take the form to another link.
Here is my fiddle to show what I am working with :
https://jsfiddle.net/4s8qevz7/
I have tried putting in actions to go to for, (as of right now) generic links. But no luck.
<form style="margin-top:40px;" id="search-box" action="">
<div class="search-tab" data-search-type="catalog" action="http://catalog.com/" onClick="changePlaceholder(this)">Catalog </div>
<div class="search-tab selected" data-search-type="website" action="https://www.google.com/"onClick="changePlaceholder(this)">Website </div>
My expected results would be depending on the active tab, the form would respect that when the go button is clicked.

1) call preventDefault() in the form submit method
2) get active tab from event.target
3) call form.submit with the correct options based on the active tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab {
overflow: hidden;
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: #f1f1f1;
float: left;
border: solid 1px #ccc;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#search-text-form{
margin-top: 2rem;
}
#current-action-section{
margin-top: 2rem;
}
</style>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<section id="search-bar">
<div class="tab">
<button id="openByDefault" class="tablinks" onclick="openTab(event, 'Catalog')" data-action="http://catalog.com">Catalog</button>
<button class="tablinks" onclick="openTab(event, 'Website')" data-action="https://www.google.com">Website</button>
</div>
<div id="Catalog" class="tabcontent">
<h3>Catalog</h3>
<p>Catalog</p>
</div>
<div id="Website" class="tabcontent">
<h3>Website</h3>
<p>Website</p>
</div>
<form id="search-text-form">
<input type="text" id="search-text" placeholder="Search Website"><button id="go">Submit</button>
</form>
<script>
const form = document.getElementById('search-text-form');
form.onsubmit = e => {
e.preventDefault();
const activeTab = document.getElementsByClassName('tablinks active')[0];
const {action } = activeTab.dataset;
console.log(action);
document.getElementById('current-action').innerHTML = `Current Action: ${action}`;
// when you're ready, call whatever api is usually called in the submit function
}
document.getElementById("openByDefault").click();
</script>
</section>
<section id="current-action-section">
<h3 id="current-action"></h3>
</section>
<script>
var emailAddress = "jimmyleespann#outlook.com";
//email;
var text = "https://docs.google.com/forms/d/e/1FAIpQLSdFDFGDFVDGGjdfgdfgdx8P4DOw/viewform?usp=pp_url&entry.745541291="+room+"&entry.1045781291="+rr+"&entry.1065046570=4&entry.1166974658="+hr+"&entry.839337160="+spO2+"&entry.103735076=&entry.515842896="+e1Name+"&entry.631828469="+e1Reps+"&entry.1814472044="+e2Name+"&entry.905508655="+e2Reps+"&entry.1234390406="+isVol+"&entry.197252120="+education+"&entry.1748983288="+notes; var message = 'Dear ' + patientName + '\n\n' + "Thank you for submitting.\n\nHere is an autofill link: " + text; var subject = 'Submission Confirmation'; GmailApp.sendEmail(emailAddress, subject, message);
</script>
</body>
</html>
Updated JSFiddle code that I couldn't get to show up for OP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
const state = {
targetUrl: 'https://www.google.com' // because this is the default selected tab
}
function setTargetUrl(url){
state.targetUrl = url;
}
function changePlaceholder(div) {
const searchTextEl = document.getElementById("search-text")
searchTextEl.placeholder = `Search ${div.innerHTML.trim()}`;
setTargetUrl(div.dataset.action);
}
function doSubmit(){
console.log('submitForm', state);
}
</script>
</head>
<body>
<form style="margin-top:40px;" id="search-box" onsubmit="submitForm">
<div
class="search-tab"
data-search-type="catalog"
data-action="http://catalog.com/"
onclick="changePlaceholder(this)">
Catalog
</div>
<div
class="search-tab selected"
data-search-type="website"
data-action="https://www.google.com/"
onclick="changePlaceholder(this)">
Website
</div>
<script>
</script>
<a href="t$003f/" target="_blank" style="text-decoration:none">
<div class="search-tab-link"> Login </div>
</a>
<div class="search-tab-content">
<div class="search-bar">
<input type="text" id="search-text" placeholder="Search Website" name="q">
<span id="search-text-icon" onclick="doSubmit()" style="cursor:pointer;">
<img
alt="go"
title="Search"
src="img/search.png"
style="height:1.2rem;"
>
</span>
</div>
<div id="search-old-catalog">
<a href="http://.com/" target="_blank">
Old Catalog
</a>
</div>
</form>
</body>
</html>

I couldn't get your jsfiddle to work, but here's an example of "2 actions within one form, one button." If the checkbox is checked, the action goes to bing.com, otherwise it goes to Wikipedia. Your if statement can use currentTarget as Dov Rine suggested, instead of a checkbox to dynamically change the form action.
function ActionSelect() {
if (document.getElementById('bing').checked) {
document.getElementsByTagName('form')[0]['action'] = 'https://bing.com';
}
}
<form style="margin:40px 50px;" action="https://www.wikipedia.org">
Choose your form action:<br/>
<input type="checkbox" id="bing"> Bing
<p>
<button type="submit" onclick="ActionSelect()">Submit</button>
</p>
</form>

How can I add values from one input box to an array? and if I enter numbers in the input field, how can I get a sum of those numbers?

How do I store input values from one input field to an array. And if I input numbers, then how can I get a sum of those numbers? Here's my codes.
I really appreciate some help from you guys.
My css
<style>
.item-check {
display: inline-block;
position: absolute;
width: 22px;
height: 21px;
cursor: pointer;
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fincomplete.png?1495684448133');
}
.complete {
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-a034ea6672b3%2Fcomplete.png?1495684439106');
}
.item-text {
margin-left: 2em;
width: 22px;
height: 21px;
}
.item-remove {
float: right;
cursor: pointer;
width:20px;
height:20px;
background-size:cover;
background-image: url('https://cdn.glitch.com/72548e86-2a07-45d1-9756-`a034ea6672b3%2Fremove.png?1495684443965');`
}
</style>
My HTML
<html>
<head>
<meta charset="UTF-8">
<title>My To-do List</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="/style.css" type="text/css">
</head>
<body>
<div class="container">
<header>
<h1>My To-do List</h1>
</header>
<!-- Key Section of App -->
<form class="list-content">
<label>
<input type="text" class="item-input">
</label>
<h4 id="message"></h4>
<ul class="shopping-list">
<!-- <li>Sample Item</li> -->
</ul>
<button class="add-item">Add Item</button>
</form>
<!-- Key Section of App -->
</div>
</body>
</html>
My Javascript code
// Step 1
// This code is executed when someone clicks the "Add Item" button
// at the top right of the shopping-item
// -------------------
<script>
$(function() {
$(".add-item").on('click', function(event) {
if ($('.item-input').val() == "") {
alert ('Please enter some text!');
return false;
} else {
var listItem = $(".item-input").val();
var itemHtml = "<li><span class='item-check'></span><span class='item-text'>" + listItem + "</span><span class='item-remove'></span></li>";
$(".shopping-list").append(itemHtml);
//Remove the text the user entered from item-input
$('.item-input').val();
$('.item-input').val('');
//Count items entered
var addedItem = $('.item-text').length;
document.getElementById("message").innerHTML=("You have entered " + addedItem + " items in your list");
event.preventDefault();
};
});
// -------------------
// This code is executed when someone clicks the "X" button
$(".shopping-list").on('click', '.item-remove', function(event) {
$(event.currentTarget).parent().remove();
});
// -------------------
// This code is executed when someone clicks the checkbox in the shopping-item section
$(".shopping-list").on('click', '.item-check', function(event) {
$(event.currentTarget).toggleClass('complete');
});
});
</script>

apply jquery filter to an created div?

Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}

Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Accessing Dynamically created elements and id in javascript - javascript

Related

How can i change attributes of appended <p> throught appended <button>

How to reset my list in my searchbox with only html/css/javascript ( no jquery, etc)?

How can I have 2 actions within one form, one button?

How can I add values from one input box to an array? and if I enter numbers in the input field, how can I get a sum of those numbers?

apply jquery filter to an created div?

Categories

Resources