I have some dynamically added elements. I want to attach 'click' event on a specific class. But the problem is if I click on the child element it's not working. Here is my dynamically added elements.
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>
Here is my javascript code:
document.body.addEventListener('click', function (evt) {
if ( evt.target.classList.contains("step-del") ) {
alert(this)
}
}, false);
evt.target is what you click on. You are clicking on a child so it is not going to trigger on a parent. So you would need to look to see if what is clicked on is the element or is a child of that element. You can do that with .closest()
const stepDelElem = evt.target.closest(".step-del");
if (stepDelElem) {
console.log('here');
}
<svg> is a different creature than normal HTML tags. A simple solution is to prevent any mouse events to interact with the <svg> by adding the following to CSS:
svg {
pointer-events: none
}
The other changes are just recommendations.
document.getElementById('steps').addEventListener('click', function(evt) {
if (evt.target.matches(".step-del")) {
console.log(evt.target.className);
}
}, false);
a {
display: inline-block;
width: max-content;
border: 1px solid red
}
svg {
pointer-events: none
}
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
1
</a>
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
2
</a>
</div>
</div>
Maybe the target is a child element of the "step-del", so you need to check with closest, which will search for the parent elements if any of them has "step-del" class.
document.body.addEventListener('click', function (evt) {
const del = evt.target.closest(".step-del")
if (del) {
alert(del)
}
}, false);
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>
I am trying to build a chrome extension to click an SVG on a webpage using the below command but it shows that "click" is not a function.
Can anyone give me some direction in order to solve this issue?
document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click();
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>
You can't really click an svg path but here is a solution:
const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path")
pathElem.onclick = () => console.log("clicked")
pathElem.dispatchEvent(new Event("click"))
pathElem.dispatchEvent(new Event("click"))
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>
Note that .click() works with HTML but not SVG elements. MDN
Also note that the click event handler in your case is probably not listening on the path element but rather on the svg, div or span tag.
i have two audio files with progress bar and both having same id:
<audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio>
</p>
<button class="btn btn-success btn-sm" id="play">
<svg style='font-size: 1.3em' class="bi bi-play-fill" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/>
</svg>
</button>
<button class="btn btn-secondary btn-sm" id="pause">
<svg style='font-size: 1.3em' class="bi bi-pause-fill" width="1em" height="1em" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3.5A1.5 1.5 0 017 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zm5 0A1.5 1.5 0 0112 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>
</svg>
</button>
<progress style="height: 4px;border: none;width: 300px;max-width: 330px" id="seekbar" value="0" max="1">ssss
And Here's js
<script type="text/javascript">
$('#play').on('click', function() {
document.getElementById('player'.).play();
});
$('#pause').on('click', function() {
document.getElementById('player').pause();
});
$('#player').on('timeupdate', function() {
$('#seekbar').attr("value", this.currentTime / this.duration);
});
</script>
now i am able to play the first audio file but cannot play second file
how do i do that?????
if there's any other solution like looping ids or anything just tell me because i am a noob in js
document.getElementById only returns the first match, if you want to get all matches, use
document.querySelectorAll instead.
Here's how you should do it
$('#play').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.play());
});
$('#pause').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.pause());
});
As kerbholz mentioned, id should be unique. If it meant to have multiple instances, consider to use class instead.
I'm trying to make a search form. I want it to be like when I click in the search form opener button, the search form would show and its width would be 100%.
When I click it again the search form width would return to 0. The first one is working but when I click it back, the form is not set to width of 0.
app.js :
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(header_search_cont.css("width","0")){
header_search_cont.css("width","100%")
search_box.focus();
header_search_cont.css("opacity","1");
header_search_cont.css("transition","all .2s ease-in-out");
}else if(header_search_cont.css("width","100%")){
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.css("width","0")
header_search_cont.css("opacity","0");
header_search_cont.css("transition","all .2s");
})
//search ends
<div id="header_search_cont" class="unstreched_search">
<form action="" method="post" name="search_form" id="search_form" enctype="multipart/form-data">
<button type="button" id="search_area_die"><svg id="search_die_svg" version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path
d="M501.333,245.333H36.417l141.792-141.792c4.167-4.167,4.167-10.917,0-15.083c-4.167-4.167-10.917-4.167-15.083,0l-160,160c-4.167,4.167-4.167,10.917,0,15.083l160,160c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125c4.167-4.167,4.167-10.917,0-15.083L36.417,266.667h464.917c5.896,0,10.667-4.771,10.667-10.667S507.229,245.333,501.333,245.333z" />
</g>
</g>
</svg></button>
<input type="search" name="search_box" id="search_box" placeholder="Search..."><button id="searchbtn"
name="searchbtn"><svg class="search_ico_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792zM202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667
S302.646,384,202.667,384z" />
</g>
</g>
</svg></button></form>
</div>
Simple way is to use addClass() and removeClass() functions instead of using .css Then for if statement you can use if($(selector).hasClass())
var header_right_search_btn =$("#header_right_search_btn");
var header_search_cont = $("#header_search_cont");
var search_box = $("#search_box");
header_right_search_btn.click(function(e){
e.preventDefault();
if(!header_search_cont.hasClass('strech')){ //<< if not hasClass() strech
search_box.focus();
header_search_cont.addClass('strech'); // addClass()
}else{
header_search_cont.removeClass('strech'); // removeClass()
}
console.log("hhihihihi");
})
var search_area_die = $("#search_area_die");
search_area_die.click(function(e){
e.preventDefault();
header_search_cont.removeClass('strech'); //<< removeClass()
})
//search ends
#header_search_cont{
width : 0px;
opacity : 0;
transition : all .2s ease-in-out;
overflow : hidden;
background : red;
padding : 10px;
box-sizing : border-box;
}
#header_search_cont.strech{
width : 100%;
opacity : 1;
transition : all .2s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header_right_search_btn">Open Search</div>
<div id="header_search_cont">
<form>
<input id="search_box" type="search" placeholder="search" />
<input id="search_area_die" type="submit" value="search"/>
</form>
</div>
Explanation:
Add/remove class strech to the element on click
Check for strech class by using .hasclass('strech')) . The ! mark means NOT so !$(selector).hasClass('strech') means if the element doesn't have this class
I need to change a backgroundColor of $('.category-edit .type')based on text changing.
i am getting the text from $('.organisation-options .organisation-option')and setting it on $('.category-edit .type').
just i need when the user click on "hotel" for example the div of $('.category-edit .type') changed text to hotel and backgroundColor also
$('.organisation-options .organisation-option').on("click", function(){
$(this).addClass('active').siblings().removeClass('active');
$('.category-edit .type').text($(this).text());
})
<div class="organisation-options">
<div class="organisation-option">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="32" viewBox="0 0 44 30">
<defs>
<path id="t70za" d="M4848.156 965.136c0-3.389 2.77-6.136 6.188-6.136 3.417 0 6.187 2.747 6.187 6.136 0 3.39-2.77 6.137-6.187 6.137-3.418 0-6.188-2.748-6.188-6.137zm27.844 22.5a1.37 1.37 0 0 1-1.375 1.364h-41.25a1.37 1.37 0 0 1-1.375-1.364 1.37 1.37 0 0 1 1.375-1.363h41.25c.76 0 1.375.61 1.375 1.363zm-31.625-6.818c.013-4.513 3.7-8.168 8.25-8.182h3.781c4.551.014 8.237 3.669 8.25 8.182v4.091h-20.28zm16.789-13.599c0-3.033 2.48-5.492 5.538-5.492 3.058 0 5.537 2.46 5.537 5.492 0 3.034-2.479 5.492-5.537 5.492-3.059 0-5.538-2.458-5.538-5.492zm7.383 6.71c4.071.012 7.367 3.282 7.381 7.319v2.297a1.37 1.37 0 0 1-1.375 1.364h-8.178v-5.454c0-1.674-.86-3.232-1.736-4.531a.633.633 0 0 1 .512-.996zm-33.164-6.71c0-3.033 2.479-5.492 5.537-5.492 3.059 0 5.538 2.46 5.538 5.492 0 3.034-2.48 5.492-5.538 5.492-3.058 0-5.537-2.458-5.537-5.492zM4832 983.545v-2.297c.011-4.039 3.308-7.31 7.38-7.323h3.386c.352 0 .704.025 1.052.075a.678.678 0 0 1 .488 1.05c-.825 1.272-1.65 2.785-1.65 4.405v5.454h-9.281a1.37 1.37 0 0 1-1.375-1.364z"></path>
</defs>
<g>
<g transform="translate(-4832 -959)">
<use fill="#769998" xlink:href="#t70za"></use>
</g>
</g>
</svg>
<span>Event agency</span>
</div>
</div>
<div class="buttons category-edit">
<div class="type" id="typeChanges">DMC</div>
</div>
There are a few ways do this. You could perhaps just change the style in jquery by either using an array or maybe adding a class - depends on how many items you have, and how much variety in color you want...
I've used an array in the snippet below (and different colours for each)
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
var myArr1 = ["Apple", "Pear", "Banana", "Avocado" , "Tomato"];
var myArr2 =['#336633', '#000055', "#005533", "#22FF33" , '#005500'];
var myval = $(this).text();
var index = myArr1.indexOf(myval);
$('.category-edit .type').text(myval);
if (myArr1.includes(myval)) {
$('.type').css('background-color', myArr2[index]);
} else {
$('.type').css('background-color', 'yellow');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="organisation-options">
<li class="organisation-option">Apple</li>
<li class="organisation-option">Pear</li>
<li class="organisation-option">Banana</li>
<li class="organisation-option">Avocado</li>
<li class="organisation-option">Tomato</li>
</ul>
<div class="category-edit">
<div class="type"> </div>
</div>
You may need this
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
// if old text is not same as new one, that is if text is changed,
if( $('.category-edit .type').text() !== $(this).text())
$('.category-edit .type').css("background-color", "yellow");
$('.category-edit .type').text($(this).text());
})