We Keep Coding

need help getting values from a click function in javascript

So I have a problem getting the ID's from my buttons. My code is only returning the id value from the first tic button and not the rest of them when I click on them.
here is the HTML:
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
and here is the javascript:
const tick = document.querySelector('.tic');
tick.addEventListener('click', () =>{
var slot = tick.id;
console.log(slot);
});
it only returns 0 when I click on the first button but it does not return 1 when I click on the second one. Instead, it doesnt do anything. Any help would be great. Thanks

querySelector returns the first element.
Instead, use querySelectorAll to select all elements, loop through each and add a click event listener:
const tick = document.querySelectorAll('.tic');
tick.forEach(e => {
e.addEventListener('click', () => {
var slot = e.id;
console.log(slot);
});
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>
Or, even better, use event delegation:
document.body.addEventListener('click', function(e) {
if (e.target.classList.contains("tic")) {
console.log(e.target.id);
}
})
<div class="row">
<div class="col-lg-12">
<a class="btn btn-lg btn-primary tic" id="0">#</a>
<a class="btn btn-lg btn-primary tic" id="1">#</a>
<a class="btn btn-lg btn-primary tic" id="2">#</a>
</div>
</div>

Pass html string in controller and put into .html (angular js)

I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with
ng-bind-html
Still not working, any solution for me ? Thanks
This is my code :
Controller
if(item.active === 1){
html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';
}else{
console.log(1);
html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}
$scope.getButtonOnOff = function(html_button) {
return $sce.trustAsHtml(html_button);
};
Html
<span ng-if="data.active === 1">
<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
</span>
<span ng-if="data.active === 0">
<button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
</span>

Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>

Bootstrap Container & Container Fluid have an issue

I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>

This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.

I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka

How to create a directive for building a part of DOM?

How can I create a directive to create such elements:
<div class="col-xs-6 todo">
<h2>Do</h2>
<div class="item" task-name="task1457">
<div class="close"><a class="btn btn-danger" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>A</h3>
<p>B</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p></div>
<div class="item" task-name="task57323">
<div class="close"><a class="btn btn-danger btn-delete" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>C</h3>
<p>D</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p></div>
<div class="item" task-name="task278">
<div class="close"><a class="btn btn-danger btn-delete" name="remove"><span class="glyphicon glyphicon-remove"></span></a></div>
<h3>E</h3>
<p>F</p>
<p class="fire"><a class="btn btn-primary start" href="#" role="button">Start doing</a></p>
</div>
</div>
It should be a collection of items inside of <div class="todo">.

Change multiple button classes depending on condition

I'm building a multiple-choice question web app. There are 5 options for every question. Before a button is clicked it has a default button class: btn btn-default. At the moment I have it so that when a choice is made, all the buttons are deactivated and a div appears where an explanation of the answer is meant to populate.
When a correct answer is selected I want to change the button class to btn btn-success, but if an incorrect answer is selected I want to change the incorrect selection to btn btn-danger and the correct answer to btn btn-warning.
Here's my controller:
.controller('ChoiceCtrl',['$scope', '$http', function($scope, $http){
$scope.choiceb = true;
$scope.isDisabled = false;
$scope.disableClick = function() {
$scope.isDisabled = true;
return false;
}
}])
And here's my HTML:
<div ng-controller="ChoiceCtrl">
<div id="choices">
<h3>Choose your answer:</h3>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#01</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#02</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#03</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#04</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#05</button>
</div>
<div id="answer" class="choiceb" ng-if="myApp.choiceb"></div>
<hr>
<div id="rating">
<h4>Rate this question:</h4>
<h4 id="thumbs">
<a href="#">
<i class="glyphicon glyphicon-thumbs-up" id="voteup"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-thumbs-down" id="votedown"></i>
</a>
</h4>
</div>
<button class="btn btn-primary pull-right choiceb" id="next-question" ng-if="myApp.choiceb">Next Question</button>
</div>
I've been able to use ng-class to change the correct answer to green, but haven't been able to get the incorrect answer to turn red while highlighting the correct answer in orange. Any help would be great. Thank you!