Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
hello everyone i have made a dropdwon list that displays something on screen when i press a item in it but i need it to display more than 1 thing at a time but i dont know how to do that
<?php
session_start();
if (!isset($_SESSION["userId"])) {
header('Location: ../../auth/login');
die();
}
<div class="d-flex justify-content-center row">
<div class="col-md-10 col-lg-10">
<div class="border">
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row justify-content-between align-items-center mcq">
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row align-items-center question-title">
<h3 class="text-danger"></h3>
<h5 id="complaintHeader" class="mt-1 ml-2">welke lichaamelijke klachten heeft u</h5>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">klachten</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item Maag" href="#" onClick="changeHeader('Maag')">MAAG</a>
<a class="dropdown-item Darmen" href="#" onClick="changeHeader('Darmen')">DARMEN</a>
<a class="dropdown-item Hyperventilatie" href="#" onClick="changeHeader('Hyperventilatie')">HYPERVENTILATIE</a>
<a class="dropdown-item Hartritme-Klachten" href="#" onClick="changeHeader('Hartritme-Klachten')">HARTRITME-KLACHTEN</a>
<a class="dropdown-item Misselijkheid" href="#" onClick="changeHeader('MIsselijkheid')">MISSELIJKHEID</a>
<a class="dropdown-item Keelklachten" href="#" onClick="changeHeader('Keelklachten')">KEELKLACHTEN</a>
</div>
</div>
</div>
<div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
<button class="btn btn-primary d-flex align-items-center btn-danger" type="button">
<i class="fa fa-angle-left mt-1 mr-1"></i>
previous
</button>
<button type="button" class="btn btn-primary">bij klachten</button>
<button class="btn btn-primary border-success align-items-center btn-success" type="button">Next
<i class="fa fa-angle-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
require '../include/footer.php'; //include footer
require '../auth/logout-modal.php'; //include logout modal
?>
<script>
function changeHeader(s){
document.getElementById("complaintHeader")
.innerHTML = "welke lichaamelijke klachten heeft u: " + s;
}
so as you can see in my code i made a dropdown button with a script that when i press something in the dropdown it displays it on screen but i want it to display multiple things
If you want to pass multiple things to changeHeader() function you can pass them as an array and in your function append them to your complainHeader with a map() method or a for loop.
<a class="dropdown-item Maag" href="#" onClick="changeHeader(['Maag','DARMEN','MISSELIJKHEID'])">MAAG</a>
function changeHeader(s){
const yourArray = s;
const Header = document.getElementById("complaintHeader");
yourArray.map(item => {
Header.innerHTML += item;
})
}
you can use for loop instead of map() method.
Related
Can someone help me in date.js or javascript, I want to generate every 3 days of the month but the weekends is not included. from there, I want to pass the generated dates in my view in form of list groups. Here are my codes so far. Thank you.
JS:
$( document ).ready(function() {
var firstDay = Date.parse("t + 1d");
var secondDay = Date.parse("t + 2d");
var thirdDay = Date.parse("t + 3d");
console.log(firstDay);
console.log(secondDay);
console.log(thirdDay);
});
In my view:
#extends('layouts.app')
#section('content')
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-calendar-check-o" aria-hidden="true"></i> <b>PICK DATE</b></h4>
</div>
<div class="card-body">
<b><h5><div class="card-header" id="decors_month"></div></h5></b>
<ul class="list-group list-group-horizontal mt-3">
<li class="list-group-item list-group-item-success text-wrap text-center">01-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">02-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">03-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<ul class="float-end"><button type="button" class="btn btn-success "><i class="fa fa-hand-o-left" aria-hidden="true"></i> Pick</button></ul>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-graduation-cap" aria-hidden="true"></i> <b>MODULE DATES</b></h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
#endsection
I am using Laravel 6. Thank you.
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<c:forEach items="${datelist}" var="list" varStatus="status" >
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight"
aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">${"Day"} ${status.count}</strong>
<small>${list}</small>
</div>
<div class="col-10 mb-1 small">${city.name}</div>
</a>
</c:forEach>
</div>
Above is my code. When 1day is clicked, I want to change the background color corresponding to 1day's div to red.
And when 2day is clicked, I want to return the color of 1day back to blue and change the background color to red only for 2day.
How can I do this?
Have a look at this
CSS could be this
#schedulelist a strong:active { background-color: red }
and you could use checkboxes too in combination with the + selector.
Here I use JavaScript
const schedulelist = document.getElementById("schedulelist");
const items = schedulelist.querySelectorAll("a strong")
const activate = e => {
const tgt = e.target;
items.forEach(item => item.classList.remove("active"));
if (tgt.tagName==="STRONG") tgt.classList.add("active");
};
schedulelist.addEventListener("click",activate)
//schedulelist.addEventListener("mouseover",activate)
#schedulelist a strong { background-color: blue }
/* #schedulelist a strong:active { background-color: red } */
#schedulelist a strong.active { background-color: red }
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">1</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">A</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">2</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">B</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">3</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">C</div>
</a>
</div>
I am trying my first vanilla JS CRUD DOM manipulation project.
I have completed the add item function however delete function isn't working properly.
There are multiple delete buttons on HTML code, and I want it to be deleted when the button clicked. However, it is only working for the first item from the list. If I click the second or third delete button, it is just not working at all.
document.querySelector('li').addEventListener('click', deleteOrTick);
//deleteTick
function deleteOrTick(e) {
console.log("check click")
if (e.target.className == 'delete') {
console.log("delete clicked")
}
deleteTask(e);
// delete task
function deleteTask(e) {
let remove = e.target.parentNode;
let parentNode = remove.parentNode;
parentNode.removeChild(remove);
}
}
deleteOrTick();
<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
</ul>
document.querySelector returns the first of the selected elements.
Also do not have one function inside the other
Lastly why call the delete when you load?
I think you meant to delegate
document.getElementById('card').addEventListener('click', function(e) {
const tgt = e.target;
const parent = tgt.closest('li');
if (tgt.classList.contains('delete')) parent.remove();
else if (tgt.classList.contains('update')) console.log("Update clicked for ",parent.querySelector(".card-title").textContent)
})
<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
</ul>
Because querySelector() returns only the first match:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
window.getElementsByTagName() could be more appropriate for your case
I always recommend doing it like this.
Add some semantic to your HTML code. In this case add the classNames translation-card-list, translation-card, etc
Make use of event bubbling by delegating the event listening to the document element and working with the target property of the event argument. This way you have only one Listener improving performance and by delegating you can add buttons at run time without adding new EventListeners in a complicated manner
Use the closest method of the Event's target to use the semantic I added in section 1
;(function(d) {
const classNameCard = 'translations-card';
const classNameUpdateButton = 'translations-card-update-button';
const classNameDeleteButton = 'translations-card-delete-button';
const onClick = function(e) {
const target = e.target
if (!target.closest(`.${classNameCard}`)) {
return false
}
if (target.closest(`.${classNameUpdateButton}`)) {
updateAction(e);
} else if (target.closest(`.${classNameDeleteButton}`)) {
deleteAction(e);
}
}
const updateAction = function(e) {
console.log('update')
}
const deleteAction = function(e) {
const card = e.target.closest(`.${classNameCard}`);
const cardList = card.parentNode;
cardList.removeChild(card);
}
d.addEventListener('click', onClick)
}(document));
<ul class="translations-card-list card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
</ul>
How do i reduce the space between the nav bar and the image?
(1) Need help for that (I am a newbie)
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3">
<h5 class="my-0 mr-md-auto font-weight-normal"></h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#"><i class="fas fa-user"></i></a>
<a class="p-2 text-dark" href="#"><i class="fas fa-shopping-cart"></i></a>
</nav>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
**<svg class="display-4">
<image href="assets/img/picture.png" />
</svg**>``
<p class="lead">Quickly build an effective pricing table for your potential customers with this
Bootstrap example. It's built with default Bootstrap components and utilities with little
customization.</p>
</div>
https://jsfiddle.net/Samantha92/8Ljy9xb5/2/
(2) Also, I need help, if I have 10 cards, I need them to show three each on the screen and maybe use carousel and move them off one at a time, with the center card being the one I can view or toggle.
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
ES6 arrow function and lexical scope inside a function [duplicate]
(2 answers)
Methods in ES6 objects: using arrow functions
(6 answers)
Closed 3 years ago.
This is my html and jquery code:
$('.edit').click(function(){
let x = $(this).parents().find('.info').children().find('dd.redirectUrl').text() ;
console.log(x) ;
})
<div id="accordion">
<div class="card">
<div class="card-header bg-dark d-flex flex-row align-items-center p-2">
<button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>
<div class="text-light text-center w-100 code">
${obj.code}
</div>
<button class="btn btn-outline-primary edit rounded-circle"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>
</div>
<div id="${pos+1}" class="collapse info">
<dl class='m-3'>
<dt>Shortened URL</dt>
<dd>${window.location.origin+ '/' + obj.code}</dd>
<dt>Redirection URL</dt>
<dd class="redirectUrl">${obj.redirectUrl}</dd>
</dl>
</div>
</div>
</div>
There are 5 in total accordions each of them having different data inside div.info. When i click button.fa-pencil button of a particular accordion, I want to log out the div.redirectUrl text of that accordion.
But my jquery code is logging out empty text.
Edit: Since, in an array I'm appending these accordions so the id's for div.collapse.info will be 1,2..5(due to pos+1) so Is there any way to log out the id of div.info when button.fa-trash is clicked ?
Also, I have changed the arrow function but it's logging out all dd.redirectUrl text as single unit. I need only one Url text which is the child of the accordion whose button.fa-pencil was clicked.
Because you use arrow function $('.edit').click(() => { so this inside the click function is not the .click element. Change this to $('.edit').click(function() { then it will work as expected.
$('.edit').click(function() {
let target_id = $(this).data('id');
let x = $('#' + target_id).find('dd.redirectUrl').text() ;
console.log(x) ;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header bg-dark d-flex flex-row align-items-center p-2">
<button class="btn btn-outline-light rounded-circle" data-toggle="collapse" data-target="#${pos+1}"><i class="fa fa-plus"></i></button>
<div class="text-light text-center w-100 code">
${obj.code}
</div>
<button class="btn btn-outline-primary edit rounded-circle" data-id="pos1"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline-danger rounded-circle"><i class="fa fa-trash"></i></button>
</div>
<div id="pos1" class="collapse info">
<dl class='m-3'>
<dt>Shortened URL</dt>
<dd>${window.location.origin+ '/' + obj.code}</dd>
<dt>Redirection URL</dt>
<dd class="redirectUrl">${obj.redirectUrl}</dd>
</dl>
</div>
</div>
<div id="pos2" class="collapse info">
<dl class='m-3'>
<dt>Shortened URL</dt>
<dd>${window.location.origin+ '/' + obj.code}</dd>
<dt>Redirection URL</dt>
<dd class="redirectUrl">${obj.redirectUrl}2</dd>
</dl>
</div>
</div>
</div>