I have this code for smooth scrolling, it works great but only for one "clickme" id, how could i use this code for multiple tabs whit i++
<div class="navbar">
<button type="button" id="clickme1">Scroll to red section!</button>
<button type="button" id="clickme2">Scroll to blue section!</button>
</div>
<div class="second" id="second">Hello</div>
<div class="tab1" id="tab1">The start of the red section!</div>
<div class="tab2" id="tab2">The start of the blue section!</div>
and here is the pure javascript that i want to use, please do not recommend me jQuery and anchor navigation.
document.getElementById('clickme1').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab1'));
});
*******or more simplified, how can i make this code shorter:*******
document.getElementById('clickme1').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab1'));
});
document.getElementById('clickme2').addEventListener('click', function() {
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab2'));
});
here is JSFIDDLE
You can do something like following
// Get buttons
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
// Iterate over buttons and add handler
buttons[i].addEventListener('click', clickHandler, false);
}
// Handler function
function clickHandler(){
var counter = this.id.substring(7); // Substring id to get counter
var header = document.querySelectorAll('.navbar');
aim = -header[0].clientHeight;
initial = Date.now();
smoothScroll(document.getElementById('tab'+counter));
}
Note : As you can have some other buttons on your page and do not want to add this handler to them, so, in place of tag name selector, I will suggest you to add a specific class to the button elements and then use class selector to get elements.
You should consider using proper anchor links with progressive enhancement for smooth scrolling. This would involve either changing the buttons to <a> tags or just wrapping them:
<div class="navbar">
<button type="button">Scroll to red section!</button>
<button type="button">Scroll to blue section!</button>
</div>
You can then use event delegation to trap clicks on any anchor link at the document level:
document.addEventListener('click', function (evt) {
var tgt = evt.target;
if (tgt.tagName === 'A' && tgt.getAttribute('href')[0] === '#') {
smoothScroll(document.getElementById(tgt.hash.slice(1)));
}
});
There are numerous benefits to this approach, including:
Ability to hotlink to a section by copy/pasting the URL
Graceful degrading when JavaScript is not present.
Related
I need to clone a div that contains an input file, and within the clone, there is a button to delete the created clone.
My problem is that once the clone is created I cannot add the function on the button to delete the clone.
The function does not work. Where am I wrong?
if (document.querySelector('.clona-input-file') !== null) {
var clonaInputFile = document.querySelector('.clona-input-file');
clonaInputFile.addEventListener('click', function(e) {
e.preventDefault();
var RowDaClonare = document.querySelector('#row-da-clonare');
var clone = RowDaClonare.cloneNode(true);
clone.children[0].lastElementChild.value = '';
clone.id = 'row-da-clonare-' + Date.now();
RowDaClonare.after(clone);
var _buttonDel = document.createElement("button");
_buttonDel.id = 'cancellaInputClone';
_buttonDel.type = 'button';
_buttonDel.setAttribute("data-id-da-eliminare", clone.id);
_buttonDel.classList.add("btn");
_buttonDel.classList.add("btn-danger");
_buttonDel.classList.add("cancellaInputClone");
_buttonDel.innerHTML = '<i class="bi bi-trash-fill"></i>';
clone.appendChild(_buttonDel);
});
}
var cloneSet = document.querySelectorAll(".cancellaInputClone");
for (var i = 0; i < cloneSet.length; i++) {
cloneSet[i].addEventListener('click', fx_button);
}
function fx_button() {
console.log(this)
}
The issue is because you're attempting to bind event handlers to elements which don't yet exist in the DOM. This can be addressed by delegating your event handlers to parent elements which do exist when the DOM loads, and interrogating the events to see if they were raised by the elements you created.
In addition there's some other issues in your code to address:
Firstly, don't use id attributes in dynamic content. It makes your logic more complex than it needs to be. Use classes instead, and relate elements to each other using DOM traversal methods, such as closest().
Secondly, use querySelector() to find the child element, not children/index accessors. It's more robust.
Lastly, you can provide multiple separate class names to classList.add() to save you having to call it repeatedly.
With that said, try this working example:
let cloneButton = document.querySelector('.clona-input-file');
if (cloneButton) {
cloneButton.addEventListener('click', function(e) {
e.preventDefault();
let rowDaClonare = document.querySelector('.row-da-clonare'); // querySelector will return first match only
let clone = rowDaClonare.cloneNode(true);
clone.querySelector('input').value = '';
rowDaClonare.after(clone);
let buttonDel = document.createElement("button");
buttonDel.type = 'button';
buttonDel.classList.add("btn", "btn-danger", "cancellaInputClone");
clone.appendChild(buttonDel);
let icon = document.createElement('i');
icon.classList.add('bi', 'bi-trash-fill');
buttonDel.appendChild(icon);
});
}
// icon click handler delegated to the .container element
document.querySelector('.container').addEventListener('click', e => {
let el = e.target;
if (!el.classList.contains('cancellaInputClone') && !el.closest('button')?.classList.contains('cancellaInputClone'))
return;
el.closest('.row-da-clonare').remove();
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div class="container">
<button class="clona-input-file">Clone</button>
<div class="row-da-clonare">
<div>
Lorem ipsum dolor sit.
<input type="text" class="foo" />
</div>
</div>
</div>
According to your code, it looks like the button is created only when the clonaInputFile is clicked, but the querySelectorAll and loop and addEventListener executes right after you registered the callback for the clonaInputFil. So now there is no button you are querying, and the cloneSet should be empty, if you haven't created before.
Try log out the length of cloneSet. If it is 0, I recommend you to put the addEventListener('click', fx_button); right after the creation of that button.
I am working on a to-do list application. I create a li item and put 2 icons and a p tag in it. One of the icons is edit and it works quite well, I replace an input with the p tag and it is fine but the problem is that my check icons on the left side work half way. If I add the li items one by one, the check icons work very well but when I add 5 or 10 items and then try to check the icons, a few of them works and the others do not. I have tried replacing i tags with span tags and no result. It is like every second li tag blocks the former one. I need help, I would appreciate any.
I'll add below the only the icons which don't work.
const DONE = document.getElementsByClassName('far fa-circle');
const LINE = document.getElementsByClassName('list-points');
const EDIT = document.getElementsByClassName('far fa-edit');
const CONTAINER = document.getElementById("actual-container");
const BUTTON = document.getElementById("list-adder");
BUTTON.addEventListener('click', nameList);
function nameList() {
const item1 = document.createElement("i");
item1.className = "far fa-circle";
const paraph1 = document.createElement("p");
paraph1.className = "list-points";
paraph1.innerText = "Fresh again!";
const item2 = document.createElement("i");
item2.className = "far fa-edit";
const myList = document.createElement("li");
myList.appendChild(item1);
myList.appendChild(paraph1);
myList.appendChild(item2);
CONTAINER.appendChild(myList);
for (let i = 0; i < DONE.length; i++) {
DONE[i].addEventListener('click', function() {
DONE[i].classList.toggle('fa-times-circle');
})
}
}
<head>
<title>Debug</title>
<script src="https://kit.fontawesome.com/ae444f90db.js" crossorigin="anonymous"></script>
</head>
<body>
<div>
<ul id="actual-container"></ul>
</div>
<button id="list-adder">ME</button>
</body>
The error is within the assignment of your click-handlers.
You do
for (let i = 0; i < DONE.length; i++) {
DONE[i].addEventListener('click', function() {
DONE[i].classList.toggle('fa-times-circle');
});
}
This will add a toggling event handler to all elements that you keep in DONE and has this behaviour.
Click button: create elements A, assign click handler to A
(A has a single handler) works
Click button: create elements B, assign click handler to A and B
(A has two handlers) does not work
(B has a single handler) works
Click button: create elements C, assign click handler to A and B and C
(A has three handlers) works
(B has two handlers) does not work
(C has a single handler) works
Because you are using toggle in your click handler, the handlers are "canceling" each other because toggling something twice will leave you in the initial state.
I guess you are not aware of the fact that getElementByClassName returns a live list, so that the elements of your variable DONE are changed when you add new elements to the DOM. I was not aware of this either, so thank you for your question :)
See here for a better explanation: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
In your code it should be enough to add the handler just to the one element you create (item1 is the icon element in your code):
item1.addEventListener('click', function() {
item1.classList.toggle('fa-times-circle');
});
I have a little app that adds items to a list. The items appear with a button next to them, I want to be able to press that button to add a (text-decoration: line-through). I have tried a few different things but nothing seems to work (the Javascript to add items, delete the last item, add classes to the new li elements, etc. All that works fine, my problem is only with the JQuery part, more comments on the code itself).
HTML
<html>
<body>
<h1> Shopping List </h1>
<button id="add"> Add </button>
<input type="text" id="input" placeholder="Enter Items"> </input>
<button id="remove"> Remove Last </button>
<ul id="list">
</ul>
</body>
</html>
Js/Jq:
document.getElementById("add").addEventListener('click', function() {
var check = document.createElement("button");
var input = document.getElementById("input").value;
var newEl = document.createElement("li");
var newText = document.createTextNode(input);
var buttonText = document.createTextNode("Check");
newEl.className = "liEl";
newEl.appendChild(newText);
newEl.appendChild(check);
check.setAttribute("class", "checked");
check.appendChild(buttonText);
/* Problem starts here */
$("button.checked").on('click', function() {
$('li.liEl').css('text-decoration: line-through');
/* It should get the button with the class "checked" and on click, make the li elements with class "liEl" to have that css... */
}
);
var position = document.getElementsByTagName("ul")[0];
position.appendChild(newEl);
document.getElementById("input").value = "";
document.getElementById('input').onkeypress = function(e) {
if (e.keyCode == 13) {
document.getElementById('add').click(); /* adds an event listener to the submit text, keyCode 13 equals the enter key so when it's pressed it presses the add button. */
}
}
});
/* Delete last item function: */
document.getElementById("remove").addEventListener('click', function() {
var els = document.getElementsByTagName("li");
var removeEl = els[els.length - 1]; // <-- fetching last el, If els is an array, it has indices from 0 to els.length - 1. 0 is the first, els.length - 1 is the last index.
var containerEl = removeEl.parentNode;
containerEl.removeChild(removeEl);
});
Use style like $('li.liEl').css('text-decoration','line-through');
Your jQuery css function is wrong, you need to provide two parameter to set css value (see this: css-property-name-value).
Your selector syntax ($('li.liEl')) is not right, it would return all <li> element, not the one the clicked button is located.
You can use this: $(this).parent().css('text-decoration', 'line-through');.
Your code contain some bug, the last added button would not trigger the function. It is because your click function is added before the new element added to DOM. And it would cause your click function to be triggered multiple time for earlier added button.
Here's the snippet for fixed code. Since you already using jQuery, I change several native java script native element query and event handler whith jquery syntax.
$(function () {
$("#add").click(function(evt) {
var input = $('#input').val();
var check = $('<button class="checked">Check</button>');
var newEl = $('<li class="liEl"></li>');
newEl.append(input);
newEl.append(check);
$(check).click(function(evt) {
$(this).parent().css('text-decoration', 'line-through');
});
$('#list').append(newEl);
$('#input').val('');
});
$('#remove').click(function(evt) {
var lastEl = $('li.liEl').last();
lastEl.remove();
});
$('#input').keypress(function(evt) {
if (evt.keyCode === 13) {
$("#add").click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<h1> Shopping List </h1>
<button id="add"> Add </button>
<input type="text" id="input" placeholder="Enter Items" />
<button id="remove"> Remove Last </button>
<ul id="list"></ul>
</body>
I have to loop through <article> tag in the Html file and add its classname when clicked and then remove the class name in all other <article> tags
for eg:
<article onclick="javascript:selectthis(this)">
1
</article>
<article onclick="javascript:selectthis(this)">
11
</article>
<article onclick="javascript:selectthis(this)">
111
</article>
<article onclick="javascript:selectthis(this)">
1111
</article>
<article onclick="javascript:selectthis(this)">
11111
</article>
<script>
function selectthis(THIS) {
THIS.className = "countrySelected";
}
</script>
is there a way to loop through the tags and remove the classnames except for the recent one that is clicked? What is the best possible way to do ? Should I really have to add a onclick event attached to every <article> tag? because there could be many <article> tag in the html file. I really donot want to add this onclick event to every article tag.
any help would be appreciated.
You didn't tag jQuery , but I'd recommend using that in this particular case, where event bubling and filtering plays nice. Instead of register multiple click-handlers (as you point out) you can register one soley, and have that one in common for all elements. jQuery is good at filtering out events to a specific selector as well. I'd give it a shot.
Here's an example of how to solve your issue using jQuery:
// Register an event-handler on document, that listens for a 'click' event.
// Only pick up the event from the selector 'article' though, which corresponds
// to only article elements on the page.
$(document).on('click', 'article', function(){
this.className = "countrySelected"; // this in this context, is the actual DOM-element
});
Then for your issue of removing the className for all articles, not having the class countrySelected. This also is nice with jQuery as such:
// Find all article-elements, that DON'T have the class countrySelected
// Then remove _all_ the classes it has
// To remove a specific class, use .removeClass('classToRemove')
$('article').not('.countrySelected').removeClass();
So in the end, you can combine the two and make this:
$(document).on('click', 'article', function(){
$('article').removeClass(); // Remove class from all other first
this.className = "countrySelected"; // this in this context, is the actual DOM-element
});
Assuming you do place an onclick on each article .. inside of your function, you could do this:
function selectthis(THIS) {
//remove the css classes from all articles
var articles=document.getElementsByTagName('article');
for(var a=0;a<articles.length;a++){
articles[a].setAttribute('class','');
}
//add class back on for this article
THIS.className = "countrySelected";
}
Add this jquery:
$("article").click(function() {
$("article").toggleClass("countrySelected");
});
Example code snippet:
$("article").click(function() {
$(".countrySelected").removeClass("countrySelected");
$(this).addClass("countrySelected");
});
article.countrySelected {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>This is article 1</article>
<article>This is article 2</article>
<article>This is article 3</article>
<article>This is article 4</article>
<article>This is article 5</article>
<article>This is article 6</article>
Since you didn't tag this jquery, here is a pure javascript solution:
window.onload = function() {
// This is a list of all the articles on the page
var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; ++i) {
// Loop through each article
var article = articles[i];
// Add an event listener for each one
article.addEventListener("click", function() {
// Get the previously selected one and deselect it
var prevSelected = document.querySelector(".countrySelected");
if (prevSelected != null) prevSelected.classList.remove("countrySelected");
this.classList.add("countrySelected"); // or for older browsers: this.className = "countrySelected";
}, false);
}
}
window.onload = function() {
var articles = document.querySelectorAll("article");
for (var i = 0; i < articles.length; ++i) {
var article = articles[i];
article.addEventListener("click", function() {
var prevSelected = document.querySelector(".countrySelected");
if (prevSelected != null) prevSelected.classList.remove("countrySelected");
this.classList.add("countrySelected"); // or for older browsers: this.className = "countrySelected";
}, false);
}
}
.countrySelected {
background-color: orange;
}
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<article>Article 4</article>
<article>Article 5</article>
I'll treat it this way without using jQuery. The reason why is this way in the future it is far more easier to understand why certain stuff happens. And sometimes basic JS is far more fitting for using a small adjustment instead of a bloated library.
The best way is to start, is at the moment nothing still happened and the page just loaded. Instead of using the javascript inline with an onclick. First assign an event-listener.
Page Loaded
With Element.getElementsByTagName() you can get all the needed elements and go for a loop. documentation;
So you get
var articleTags = document.getElementsByTagName('ARTICLE');
In this case we can use a simple loop
var articleDOM = null;
for(var i = 0; i < articlesTags.length; i++){
articleDOM = articlesTags[i];
articleDOM.addEventListener("click", addClassToArticleFunction);
)
Each article now has an event binded with a function. Let's define that function.
Add Class Function
I'll use 'addClassToArticleFunction', but you can of course make it even more generic in name. Could be you want also use this function for other tags or DOM-elements.
function addClassToArticleFunction(){
this.className = "countrySelected";
}
Each time this will be called the class will be defined. Only you off course get a problem by all of them will get that classname.
So lets just call a function that will do all the deleting.
function addClassToArticleFunction(){
deleteClassNameFromArticles();
this.className = "countrySelected";
}
function deleteClassNameFromArticles(){
//deletion here
}
Since we know all the articles already, and know how to calls the classname it is an easy copy paste
for(i = 0; i < articleTags.length; i++){
articleDOM = articleTags[i];
articleDOM.className = "";
}
At this point it is done.
Recap
load window
assign event listeners to articles
when clicked on article a function will be called
this function will delete all classnames from articles
this function will assign on the clicked article a classname
JS fiddle to see it work
i have made a calculator. i have uploaded it on the following webpage.
www.vipulshree.com
i want to highlight a button on clicking it and remove highlight from it when another button is clicked. when the next button is clicked, it should change color/disable/highlight and the previous button comes back to normal. Please help me ive searched all over the net for this and could not find anything. Help me im desperate.
Thank You.
You can define a class for your buttons and then using the click event you can change its color, and when you click on any button save it in variable say "previous".
So when you click any other button you again change the color of the saved button variable
and assign the current button to that variable.
var previous;
document.getElementsByClassName("className").onclick = function (){
// change the color of the previous element
previous = this;
// change the color of this button
}
Use the :focus CSS pseudo-selector. It will match the element currently having focus. Seems to not work on buttons
Use JavaScript to add a class .focused on click, and remove it on all other elements. Use event delegation on the common parent of all buttons (in this code, it's assumed to be #container).
<script type="text/javascript">
setFocus = function(e) {
if (document.getElementsByClassName('focus')[0]) document.getElementsByClassName('focus')[0].className = '';
if (e.target.tagName.toLowerCase() == 'button') {
e.target.className = 'focus';
}
};
document
.getElementById('container')
.onclick = setFocus;
</script>
My HTML markup looked like this:
<div id="container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
Working Example
here is a little jsfiddle working example, it's using jQuery only for the dom ready loader and a CSS class to do the highlight effect.
http://jsfiddle.net/t6bJ3/
var buttons = document.getElementsByTagName('button'),
buttonsLength = buttons.length,
selected,
i = 0,
reset = function() {
for (i = 0; i < buttonsLength; i++) buttons[i].className = '';
},
highlight = function(ev) {
reset();
ev.target.className = 'highlight';
};
for (; i < buttonsLength; i++) buttons[i].onclick = highlight;