I have a button group that on click gets background color of blue:
<div class="btn-group-vertical answers_group" data-toggle="buttons-radio">
<button button type="button" onclick="setArrayAnswer('optionA')" id="optionA" class="text-left btn text-secondary border border-info" data-toggle="button">
<h3 class="text-primary">A.</h3>
<p id="optionA_text" class="text-secondary text-left"></p>
</button>
<button button type="button" onclick="setArrayAnswer('optionB')" id="optionB" class="text-left btn text-secondary border border-info" data-toggle="button">
<h3 class="text-primary">B.</h3>
<p id="optionB_text" class="text-secondary text-left"></p>
</button>
<button button type="button" onclick="setArrayAnswer('optionC')" id="optionC" class="text-left btn text-secondary border border-info" data-toggle="tab">
<h3 class="text-primary">C.</h3>
<p id="optionC_text" class="text-secondary text-left"></p>
</button>
<button button type="button" onclick="setArrayAnswer('optionD')" id="optionD" class="text-left btn text-secondary border border-info" data-toggle="button">
<h3 class="text-primary">D.</h3>
<p id="optionD_text" class="text-secondary text-left"></p>
</button>
</div>
Now when the user click a button i store in an array a status of which answer he chose above. What i try to achieve is when a question gets loaded if it has already been answered i want to have the same effect as when i click it which i achieve like this:
.btn:focus {
background: #81d4fa;
}
I tried with the following JS code:
var answer_id = "option" + subject1_arr[subject1_question].answer;
document.getElementById(answer_id).click();
Basically i just try to click the item depending on the ID which i get by concatenating the base id for all and adding the appropriate letter, but it doesn't work.
Related
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Get multiple elements by Id
(14 answers)
Closed 1 year ago.
I am making a menu and I am currently implementing a feature where you can close the menu. I have three different menus inside of an overlay. When you close the menu I want the overlay to be display: none;. I have three buttons that do this (one for each menu). However, only the button at the top of the HTML code works. I know it is only the one at the top, because I tried deleting the one that was on the top, and then the second button would work since that is now the top button. I also tried giving different IDs, but that didn't make a difference.
Here is a shortened version of the parts of my code that I am talking about:
var overlay = document.getElementById("overlay");
var closeMenu = document.getElementById("closeMenu");
closeMenu.addEventListener('click', function() {
overlay.style = "display: none;";
});
<div class="overlay" id="overlay">
<div class="selectMenu" id="selectMenu">
<div class="h2Wrapper">
<h2>Create Canvas</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
<div class="selectMenu2" id="selectMenu2">
<div class="h2Wrapper">
<h2>Upload Image</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
<div class="selectMenu3" id="selectMenu3">
<div class="h2Wrapper">
<h2>Create Blank</h2>
<button type="button" name="button" class="closeMenu fas fa-times" id="closeMenu"></button>
</div>
</div>
</div>
First of all, the attribute id must be unique in a document, use class instead. Then you can target all the element with the class to loop through them and attach the event individually:
var overlay = document.getElementById("overlay");
var closeMenu = document.querySelectorAll(".closeMenu");
closeMenu.forEach(function(cm){
cm.addEventListener('click', function() {
overlay.style = "display: none;";
});
});
<div class="overlay" id="overlay">
<div class="selectMenu" id="selectMenu">
<div class="h2Wrapper">
<h2>Create Canvas</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
<div class="selectMenu2" id="selectMenu2">
<div class="h2Wrapper">
<h2>Upload Image</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
<div class="selectMenu3" id="selectMenu3">
<div class="h2Wrapper">
<h2>Create Blank</h2>
<button type="button" name="button" class="closeMenu fas fa-times" class="closeMenu"></button>
</div>
</div>
</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>
I have an add to list button in my component, that disables when a user clicks it once. Problem is when the user clicks the button next to the list item they want to add, it disable all the other list buttons also? I only want it to disable the one selected. My code so far is:
component.html
<div *ngFor="let itunes of data | paginate: { itemsPerPage: 10, currentPage: p } | filter:filter; let i = index">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12">
<img class="align-self-start mr-5 mb-5 artwork" src="{{itunes.artworkUrl100}}" alt="image">
</div>
<div class="col-md-8 col-lg-8 col-sm-12">
<h2 class="mt-0 d-inline-block text-truncate trunc">{{itunes.collectionName}}</h2>
<h4 class="mt-0 mb-3">{{itunes.artistName}}</h4>
<h5 class="mt-0 mb-3">Listen</h5>
</div>
<div class="col-md-2 mb-5 col-lg-2 col-sm-12">
<a target="_blank"><button type="button" class="btn btn-primary btn-lg float-right"
(click)="addSongToPlaylist(itunes); clicked = true;" [disabled]="clicked">
<fa-icon [icon]="faPlus">
</fa-icon>
</button></a>
</div>
</div>
</div>
component.ts (Add function)
addSongToPlaylist(itunes) {
this.list.playlist.push(Object.assign({}, itunes));
this.list.savePlaylist();
console.log('Playlist - ', this.list.playlist);
}
Any ideas, what I am doing wrong?
You have only one clicked property and all buttons have their disabled property bound to that property. That is why they are all enabled or disabled at the same time.
The simplest solution is to add a clicked property to the Itunes class, and modify its value when the button is clicked:
(click)="addSongToPlaylist(itunes); itunes.clicked = true;" [disabled]="itunes.clicked"
An alternative is to store the clicked value in a separate array, where each array item refers to an item of the data array.
Maybe do this:
<button type="button" class="btn btn-primary btn-lg float-right"
(click)="addSongToPlaylist(itunes); clicked = i;" [disabled]="clicked===i">
<fa-icon [icon]="faPlus">
</fa-icon>
</button>
I am building a survey application using bootstrap,in that i have two image buttons thumbs up and thumbs down on my page , when i click thumbs up button it should be selected and when i click on thumbs down button it should select this button but deselect the thumbs up button.and also want to validate that the user must select a button without selecting it should not process or navigate to other page.
My code for the button :
<div class="row">
<div class="col-md-10" align="left">
<h5> My products solve real world problems.</h5>
</div>
<div class="col-md-1">
<h4><button type="button" class="btn-link" value="0" id="like1" onclick="likeq1()" >
<span class="fa fa-thumbs-up" ></span>
</button></h4>
</div>
<div class="col-md-1">
<h4> <button type="button" class="btn-link" value="0" id="unlike1" align="right" onclick="unlikeq1()">
<span class="fa fa-thumbs-down" ></span>
</button></h4>
</div>
</div>
How to toggle Element that is clicked and hide all other using bootstrap V3.5?
this is my code:
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>
DEMO page.
You should probably put the data-target attribute on the buttons themselves, but your code as is... use the following in jQuery:
$("button").on("click", function(){
var alertMsg = $(this).parent().data("target");
alert(alertMsg); //First grab the data-target from the button's parent, or alternatively the button itself as I would recommend.
//Note, you have a typo which I moved forward with below.
/* var itemToShow = "#" + alertMsg;
alert(itemToShow); */
// I would recommend as well you don't use hashtags in your data-*
// elements. Rather as shown here, add the hashtag in with code.
$("#itens .collapse").hide(); //first hide all of the elements
$(alertMsg).show(); //then show the element related to your button click event data-target id.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>