Onclick event js not rendering - javascript

I need to render a new card that already has a function with the change event. I was trying to remove a class from the actual card (show) so it wont show the card and then add a class (show) to the oter card that I want to render. I did this code, but it doesnt work, any other ideas? thanks.
const dropdownmenucli = () => {
const print = document.getElementById ('drop2');
const dropdown= document.getElementById ('dropdowns2');
const printDocument=document.getElementById('cnd');
const delWindow=document.getElementById('exampleModal2');
const popWindow=document.getElementById('exampleModal');
dropdown.addEventListener('change', (event) => {
const value = document.getElementById('dropdowns2').value;
print.innerHTML=`
<div class="padding-b" >
<a class="text-decoration btn btn-primary" id="cnd"> Create New Document </a>
<a class="text-decoration btn btn-primary" href="/Create/${value}"> Existing Document</a>
</div>
`
})
}
const Redirect = document.getElementById('cnd') ? () => {
printDocument.addEventListener('clik',(event) => {
delWindow.classList.remove("show");
popWindow.classList.add("show");
})
}: null
dropdownmenucli()

Related

Mobile Friendly image Hotspot with clickable buttons

I am trying to use the mobile friendly hotpot code from codepen https://codepen.io/abcretrograde/pen/dKGOEL
When the user clicks on the hotspot is pops up with some text etc. I tried putting a button and a link in to popup but neither work.
In the JavaScript I have tried adding EventListeners to the buttons but they still wont fire when user clicks on them. anyone got any ideas?
in the javascript i have tried both the following, get no errors but doesn't do anything
<div class="lg-container">
<img id="skyemap" src="/assets/imgs/map.png" class="lg-image" alt="myMap" />
<div style="top: 70%; left: 50%;" class="lg-hotspot lg-hotspot--top-left">
<div class="lg-hotspot__button"></div>
<div class="lg-hotspot__label">
<h4>View More Details</h4>
</p>Click the button to view more information
<button class="btn btn-sm btn-success btnFP" id="btnFP">Visit Here</button>
</p>
</div>
</div>
<script>
const selectHotspot = (e) => {
const clickedHotspot = e.target.parentElement;
const container = clickedHotspot.parentElement;
const hotspots = container.querySelectorAll(".lg-hotspot");
hotspots.forEach(hotspot => {
if (hotspot === clickedHotspot) {
hotspot.classList.toggle("lg-hotspot--selected");
const childHP = hotspot.querySelector('.lg-hotspot__label');
const btn = childHP.querySelector('.btn');
childHP.addEventListener('click', ()=>{
alert('clicked');
});
} else {
hotspot.classList.remove("lg-hotspot--selected");
}
});
}
(() => {
const buttons = document.querySelectorAll(".lg-hotspot__button");
buttons.forEach(button => {
button.addEventListener("click", selectHotspot);
});
})();
const btnFP = document.getElementById('btnFP');
btnFP.addEventListener('click', ()=>{
alert('clicked');
});

Add animation to filter items on click

I created a filter gallery. I want to animate the filter items every time I click to a buttons. But my codes are not doing it properly. It animates filter items like toggle. If I click on a button first time it animates items, then If I click on another button it shows nothing. After that If I click on another button it animates again. What's wrong with my code? Experts please help me to find out the proper solution. Thanks in advance.
Here is my code:
import React, { useState } from 'react';
import suggestData from '../data/suggest-data.json';
const allCategories = ['All', ...new Set(suggestData.map(item => item.area))];
const Suggest = () => {
const [suggestItem, setSuggestItem] = useState(suggestData);
const [butto, setButto] = useState(allCategories);
const [selectedIndex, setSelectedIndex] = useState(0);
const [anim, setAnim] = useState(false);
const filter = (button) => {
if (button === 'All') {
setSuggestItem(suggestData);
return;
}
const filteredData = suggestData.filter(item => item.area === button);
setSuggestItem(filteredData);
}
const handleAnim = () => {
setAnim(anim => !anim);
}
return (
<div>
<h1>Suggest</h1>
<div className="fil">
<div className="fil-btns">
<div className="fil-btn">
<button className='btn'>Hello</button>
{
butto.map((cat, index) => {
return <button type="button" key={index} onClick={() => { filter(cat); setSelectedIndex(index); handleAnim(); }} className={"btn" + (selectedIndex === index ? " btn-active" : "")}>{cat}</button>
})
}
</div>
</div>
<div className="fil-items">
{
suggestItem.map((item, index) => {
return (
<div className={"fil-item" + (anim ? " fil-item-active" : "")} key={index}>
<h1>{item.name}</h1>
<h2>{item.category}</h2>
<h3>{item.location}</h3>
<h4>{item.type}</h4>
<h5>{item.area}</h5>
</div>
);
})
}
</div>
</div>
</div>
);
}
export default Suggest;
In your handleAnim() function, you are simply toggling the value of anim state. So initially, its value is false and when you click the button for the first time, it is set to true. On clicking the next button, the anim state becomes false because the value of !true is false and hence your animation doesn't work. On next click, becomes true again since !false is true and the toggle continues again and again.
If you want to make your animations work on every click you will need to set the anim state value to true on every button click as below since you seem to depend on the value to set animations. As an alternative, I think it will do just fine if you simply add the animation directly to the enclosing div with class .filter-item instead of relying on states to trigger the animation since after every filter you apply, the elements will be re-rendered and the animation will happen after every re-render.
const handleAnim = () => {
setAnim(true);
}

How to single select button using jquery?

How can I manipulate CSS and read text value and save it into variable when clicking on the button. when I click on the button using jquery how can I add a CSS to the button such as class="btn-n-active".
How to make sure that only one button is selected while switching on different buttons and that button should have active CSS
I was trying to just read the single value from the options, just a single selection.
<p>
<button onclick="myFunction()" class="btn-n">DOG</button>
<button onclick="myFunction()" class="btn-n">CAT</button>
<button onclick="myFunction()" class="btn-n">LION</button>
<button onclick="myFunction()" class="btn-n">PIG</button>
</p>
const myFunction = () => {
}
It's like a quiz system where I just want to read a single value. I am not able to apply the logic
There are a bunch of options to do this. Below you will see 3 of them.
The idea is to select all buttons and remove the active class and then add it to the button you clicked on.
My jquery is a bit rusty but I suggest you use just javaScript for such a simple request
const myFunction = (event) => {
const clickedElem = event.target
const allBtns = document.querySelectorAll('.btn-n')
allBtns.forEach(btn => btn.classList.remove("btn-n-active"))
clickedElem.classList.add("btn-n-active")
}
// option 2 without adding function in html
/* const allBtns = document.querySelectorAll('.btn-n')
allBtns.forEach(btn => btn.onclick = () => {
allBtns.forEach(btn => btn.classList.remove("btn-n-active"))
btn.classList.add("btn-n-active")
}) */
//option3 simple jQuery
/* const allBtns = $('.btn-n');
allBtns.click(function() {
$(this).addClass("btn-n-active")
allBtns.not(this).removeClass("btn-n-active")
}) */
const submit = () => {
const selectedText = document.querySelector(".btn-n-active") ? document.querySelector(".btn-n-active").innerText : 'Please select one'
console.log(selectedText)
}
.btn-n-active {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<button onclick="myFunction(event)" class="btn-n">DOG</button>
<button onclick="myFunction(event)" class="btn-n">CAT</button>
<button onclick="myFunction(event)" class="btn-n">LION</button>
<button onclick="myFunction(event)" class="btn-n">PIG</button>
</p>
<button onclick="submit()">Click to see selected text</button>
You can find the selected answer button having the active class using the hasClass('btn-n-active')
$("button").click(function(){
$("button").removeClass("btn-n-active"); // Remove other active class
$(this).addClass("btn-n-active"); // Add active class to the clicked button
});
const myFunction = () => {
var selectedButtonText = $("button").hasClass("btn-n-active").html();
console.log("Selected answer: " + selectedButtonText);
}

DOM getElementById as getting the whole element

why doesn't the gift just get the div id?
clicking modal is returning the whole div instead of just the id, why is that?
jsfidle
function Modals(id, bt, show) {
const modal = document.getElementById(id)
modal.classList.add(show)
modal.addEventListener("click", (elemento) => {
if (elemento.target.id === modal) {
modal.classList.remove(show)
console.log(modal)
}
})
}
const comentarios = document.querySelector(".bt_comentarios")
comentarios.addEventListener("click", () => Modals("modal_comentarios",
"bt_comentarios", "show"))
<div id="modal_comentarios" class="modal fix"></div>
document.getElementById will return an instance of HTMLElement. To get the id of the element, you'll need to use the id property.
const main = document.getElementById('main');
console.log(main);
console.log(main.id);
<div id="main">
</div>
Using your snippet
function Modals(id, bt, show) {
const modal = document.getElementById(id)
modal.classList.add(show)
modal.addEventListener("click", (elemento) => {
// EDIT: I used modal.id
if (elemento.target.id === modal.id) {
modal.classList.remove(show)
// EDIT: I used modal.id
console.log(modal.id)
}
})
}
const comentarios = document.querySelector(".bt_comentarios")
comentarios.addEventListener("click", () => Modals("modal_comentarios",
"bt_comentarios", "show"))
<div id="modal_comentarios" class="modal fix">
<button id="modal_comentarios" class="bt_comentarios">Click Me!</button>
</div>
What I changed
I added a few pieces to make the code go down the path of your if statement, and referenced the modal.id property instead of the instance of the HTMLElement itself. Let me know if you have more questions.

Click event on div with img and text not firing when clicking img

I wrote toggle script in ES6/vanilla JS. The intended functionality is super simple, you click on the toggle div and it adds an active class to another div that matches the toggle div's data-toggle property. In my toggle div, I need there to be both text and an image. It works great when you click on the text within the div, but when you click on the image within the div, the toggle is not firing. Is there something specific I need to do to include all of the children within the div?
For some reason, I can't even get this working via this code snippet editor, but it is working in my project.
const setActive = (toggles, panels, id) => {
let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
activePanel.forEach(panel => panel.classList.add('active'))
activeToggle.forEach(toggle => toggle.classList.add('active'))
}
const removeActive = (nodes) => {
nodes.forEach(node => node.classList.remove('active'))
}
const handler = (event) => {
event.preventDefault()
let id = event.target.getAttribute('data-toggle')
let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
let toggles = Array(...document.querySelectorAll('.js-toggle'))
removeActive(panels)
removeActive(toggles)
setActive(toggles, panels, id)
}
let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))
.toggle-panel {
display: none;
}
.toggle-panel .active {
display: block;
}
<div class="js-toggle toggle" data-toggle="toggle-1">
<img src="https://via.placeholder.com/50"> First toggle
</div>
<div class="js-toggle toggle" data-toggle="toggle-2">
Second toggle
</div>
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
<h1>Toggle 1</h1>
</div>
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
<h1>Second toggle!</h1>
</div>
I changed two things that I believe will resolve your issue:
I changed the selector .toggle-panel .active to .toggle-panel.active-- without that, even in the cases where the JS was working as you intended nothing was actually be made visible.
I moved your code from using event.target to event.currentTarget -- the former always points to the clicked element, whereas the latter refers to the element on which the listener has been placed.
See the snippet below.
const setActive = (toggles, panels, id) => {
let activePanel = panels.filter(panel => panel.getAttribute('data-toggle') == id)
let activeToggle = toggles.filter(toggle => toggle.getAttribute('data-toggle') == id)
activePanel.forEach(panel => panel.classList.add('active'))
activeToggle.forEach(toggle => toggle.classList.add('active'))
}
const removeActive = (nodes) => {
nodes.forEach(node => node.classList.remove('active'))
}
const handler = (event) => {
event.preventDefault()
let id = event.currentTarget.getAttribute('data-toggle')
let panels = Array(...document.querySelectorAll('.js-toggle-panel'))
let toggles = Array(...document.querySelectorAll('.js-toggle'))
removeActive(panels)
removeActive(toggles)
setActive(toggles, panels, id)
}
let toggles = Array(...document.querySelectorAll('.js-toggle'))
toggles.forEach(toggle => toggle.addEventListener('click', handler))
.toggle-panel {
display: none;
}
.toggle-panel.active {
display: block;
}
<div class="js-toggle toggle" data-toggle="toggle-1">
<img src="https://via.placeholder.com/50"> First toggle
</div>
<div class="js-toggle toggle" data-toggle="toggle-2">
Second toggle
</div>
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-1">
<h1>Toggle 1</h1>
</div>
<div class="js-toggle-panel toggle-panel" data-toggle="toggle-2">
<h1>Second toggle!</h1>
</div>
Instead of event.target you should use event.currentTarget in your handler function to return node to which event listener is attached. event.target is returning <img> node, not <div> with data-toggle in your case.

Categories