Develop Reference

Is there a way to make the onclick event function in javascript without including the onclick in html code? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I'm quite a beginner so apology for my question if it's dumb.
I have an unordered list and a button in HTML and I want to make the button show or hide the list via javascript, but I am trying to avoid giving the onclick attribute to the button in the HTML code.
var btn = document.getElementById("button");
btn.onclick = function(){
var ul = document.getElementById("ul");
if(ul.style.display=='none'){
ul.style.display='block'}
else{ul.style.display='none'}
}
<ul id=ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >
What am I missing here, can't make it work? Could only do it when I included the onclick attribute in HTML and made a showhide() function for its onclick event, but that seems impractical in the long run.

Yes, you use addEventListener
var btn = document.getElementById("button");
btn.addEventListener('click',function(){
var ul = document.getElementById("ul");
if(ul.style.display=='none') ul.style.display='block'
else ul.style.display='none'
});
<ul id="ul">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

You can define event handler using addEventListener on JavaScript.
var btn = document.getElementById("button");
btn.addEventListener('click', function(){
var ul = document.getElementById("ul");
if(ul.style.display=='none'){
ul.style.display='block'}
else{ul.style.display='none'}
});
<ul id="ul">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
</ul>
<input id="button" type="button" name="button" value="press me!" >

Can you iterate through and insert values from an array as ids for divs inserted via wrapAll()

This piece of code is part of a script I am working on that dynamically inserts filters and values based on structured HTML content.
The HTML I am dealing with has several H2s that I'd like to wrap in a div with an ID that's equal to the innerHTML of the that H2. In the bigger context, I already have an array of the H2 innerHTML values, but for this example I added a dummy array with the values as a placeholder.
Here is the portion of script that I have that wraps each H2 in a div.
var h = ['a', 'b', 'c'];
$('h2').each(function () {
$(this)
.nextUntil(this.tagName)
.addBack()
.wrapAll('<div id="' + h + '" />');
});
Here's the HTML:
<h2>a</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<h2>b</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<h2>c</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
Expected outcome:
<div id="a">
<h2>a</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
<div id="b">
<h2>b</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>
<div id="c">
<h2>c</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
</div>

Sure, just use the index passed to the anonymous each() function:
const h = ['a', 'b', 'c'];
// most jQuery methods have two arguments passed in automatically,
// the first argument is the 'index' of the current node in the
// collection of nodes,
// the second argument is a reference to the current node:
$('h2').each(function(index) {
$(this)
.nextUntil(this.tagName)
.addBack()
// here we simply supply the index to the Array of h,
// to have the result concatenated into the string:
.wrapAll('<div id="' + h[index] + '" />');
});
const h = ['a', 'b', 'c'];
$('h2').each(function(index) {
$(this)
.nextUntil(this.tagName)
.addBack()
.wrapAll('<div id="' + h[index] + '" />');
});
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 0.5em;
}
div {
border: 2px solid transparent;
}
#a {
border-color: red;
}
#b {
border-color: lime;
}
#c {
border-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>a</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<h2>b</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<h2>c</h2>
<h3>heading</h3>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
JS Fiddle demo.

hiding list items and show new li on click, but now I always need to have an empty li to "hide" them all

I've got a script that checks an li list and will show the first, with every click it will show the next li.
The problem is with this script, I have to add an empty li to "hide" all of them, is there a way to work around this, with this script?
$('#test-div2 ul li').hide().filter(':lt(1)').show();
$('#hint-1').click(function(){
$eL = $('#test-div2 ul li').filter(":visible");
$("#test-div2 ul").find("#test-div2 ul li").hide().next().show();
if($eL.next().length>0){
$eL.next().show();
}
});
This is the html:
<ul>
<li></li>
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>

How about just making the container div the thing to click to get a hint and cleaning up your JQuery a bit?
$('#hints li').hide();
$('#test-div2').click(function(){
$eL = $('#hints li').filter(":visible");
$("#hints li:first-child").show();
if($eL.next().length > 0){
$eL.next().show();
}
});
#test-div2 {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hints">
<li>hint 1</li>
<li>hint 2</li>
<li>hint 3</li>
<li>hint 4</li>
<li>hint 5</li>
<li>hint 6</li>
<li>hint 7</li>
</ul>
<div id="test-div2">Show hint</div>

is it possible, to add auto incremental classes to a list by using jquery or javascript

is it possible, to add auto incremental classes to a list
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Now, If I hover on Element 3 then, add auto incremental classes to li like example below...
<ul id="list">
<li class="left2">Element 1</li>
<li class="left1">Element 2</li>
<li>Element 3</li>
<li class="right1">Element 4</li>
<li class="right2">Element 5</li>
</ul>
Again if hover on Element 1 then, add auto incremental classes to li like example below...
<ul id="list">
<li>Element 1</li>
<li class="right1">Element 2</li>
<li class="right2">Element 3</li>
<li class="right3">Element 4</li>
<li class="right4">Element 5</li>
</ul>
sorry about my poor English. Thank you.

$('li').hover(function() {
$('li').removeClass();
var next = $(this).nextAll();
next.each(function(i, v) {
$(this).addClass('right' + (i+1))
})
var prev = $(this).prevAll();
prev.each(function(i, v) {
$(this).addClass('left' + (i+1))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
</ul>
Use .prevAll() and .nextAll()
Description: Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
then iterate on the li and assign the index. make sure to remove the li classes so it wont stack up

Based on example, I cleared all the class in <li> when mouseenter anyone of the <li> and add new class for them.
left1+n will add to previous all <li> and right1+n will add to next all <li>
$("#list > li").on("mouseenter", function(){
$("#list > li").attr("class", "");
$(this).prevAll("li").each(function(i) {
$(this).addClass('left' + (i+1));
});
$(this).nextAll("li").each(function(i) {
$(this).addClass('right' + (i+1));
});
});

JS: remove lastChild only works every second button click

I use this code to delete the last item of an <ul> list, but only on the second, fourth, sixth, ... every second click on the button the item gets removed, but every click the message appears. What can I do that the element gets deleted on every click.
document.getElementsByTagName('input')[0].onclick = function () {
'use strict';
var list = document.getElementById('list'), item = list.lastChild;
list.removeChild(item);
window.alert("Removed");
};
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li id="child">List item 4</li>
<li>List item 5</li>
</ul>
<input type="button" value="Delete last">

This is because .lastChild returns all nodes, including empty text nodes which exist in your <ul>. Use .lastElementChild instead to target your <li> nodes
The difference between this property and lastElementChild, is that
lastChild returns the last child node as an element node, a text node
or a comment node (depending on which one's last), while
lastElementChild returns the last child node as an element node
(ignores text and comment nodes).
See HTML DOM lastChild Property and HTML DOM lastElementChild Property for more information
document.getElementsByTagName('input')[0].onclick = function () {
var list = document.getElementById('list'), item = list.lastElementChild;
list.removeChild(item);
};
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li id="child">List item 4</li>
<li>List item 5</li>
</ul>
<input type="button" value="Delete last">
Some more details on why this is happening... When you format your markup with clean spacing, what I think of as "phantom" text nodes silently exist within your <ul>. If you minify this markup to the following, your first example would indeed work fine
<ul id="list"><li>List item 1</li><li>List item 2</li><li>List item 3</li><li id="child">List item 4</li><li>List item 5</li></ul>
Plunker Link - minifed markup example using .lastChild

Change:
item = list.lastChild;
to
item = list.lastElementChild;