function openclass(className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(className).style.display = "block";
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass('viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass('addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass('addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass('assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
With first button already active, I want to make every other button active on click and and remove older active, I know it can be done through js but really can't seem to figure it out
You just need to add the clickedbutton inside the onclick arguments. You can do that by using the this keyword. So onclick=openClass(this, 'className')
And then, on click, remove all the ' active classes ' and add the active class to the clickedButton
function openclass(clickedBtn, className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(`${className}`).style.display = "block";
// add remove active class
document.querySelectorAll('.btn').forEach(btn => btn.classList.contains('active') && btn.classList.remove('active'))
clickedBtn.classList.add('active')
}
.btn.active {
background:Red;
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass(this,'viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass(this, 'addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
Related
as the title says I'm trying to make a simple Javascript calculator from scratch using AddEventListener and QuerySelector functions, to me everything seems working correctly exept the equals function that gives me "undefined" result.
If anybody has a solution for that would be much appreciated.
Thank you
var btn = document.querySelectorAll(".num");
var display=document.getElementById("txtDisplay");
var btncanc=document.getElementById("canc");
var currentOp=document.querySelectorAll(".operazione");
var resul=document.getElementById("equal");
var OP = null;
function pressnum(){
var num = this.innerHTML;
display.value=display.value+num;
}
for (let i = 0; i < btn.length; i++) {
const btnNum = btn[i];
btnNum.addEventListener("click", pressnum);
}
function cancella(){
display.value= "";
}
btncanc.addEventListener("click", cancella);
function pressOp() {
prevNumber = parseInt(display.value);
display.value = "";
}
for (let i = 0; i < currentOp.length; i++) {
const Op = currentOp[i];
Op.addEventListener("click", pressOp);
}
function executeCalc() {
var currentNumber = parseInt(display.value);
var result;
switch (currentOp) {
case '+':
result = prevNumber + currentNumber;
break;
case '-':
result = prevNumber - currentNumber;
break;
case '/':
result = prevNumber / currentNumber;
break;
case '*':
result = prevNumber * currentNumber;
break;
}
display.value = result;
}
resul.addEventListener("click", executeCalc);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Esercizio calcolatrice</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row mt-3">
<div class="col-9">
<input type="text" class="form-control" readonly id="txtDisplay">
</div>
<div class="col-3">
<button type="button" class="btn btn-danger btn-block" id="canc">C</button>
</div>
</div>
<div class="row mt-3">
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">7</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">8</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">9</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-secondary btn-block operazione">/</button>
</div>
</div>
<div class="row mt-3">
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">4</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">5</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">6</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-secondary btn-block operazione" id="op">*</button>
</div>
</div>
<div class="row mt-3">
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">1</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">2</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-block num">3</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-secondary btn-block operazione">-</button>
</div>
</div>
<div class="row mt-3">
<div class="col-3 offset-3">
<button type="button" class="btn btn-primary btn-block num">0</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-success btn-block" id="equal">=</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-secondary btn-block operazione">+</button>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
In your switch, "currentOp" is not the value that you are expecting. You have to grab the innerHTML of it also.
function pressOp() {
prevNumber = parseInt(display.value);
currentOp = this.innerHTML;
display.value = "";
}
I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)
I have 4 divs that each have a button , when a button on div is clicked it should hide that div. Then there is button at top called show all which will show all hidden divs again below is all the code show button , JS script and the four div boxes which should hide when button clicked on them and show all boxes again when show button is clicked
<button type="button" class="btn btn-light btn-sm mt-3" id="show"><i class="fe fe-eye"></i> Show all</button>
<script type = "text/javascript" >
function show(elementId) {
document.getElementById("id1").style.display = "none";
document.getElementById("id2").style.display = "none";
document.getElementById("id3").style.display = "none";
document.getElementById("id4").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<div class="card project-card" id="id1">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id2">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id3">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
<div class="card project-card" id="id4">
<div class="card-header">
Bookmarks</strong>
<button type="button" class="btn btn-light btn-sm ml-3" onclick="show('id2');"><i class="fe fe-eye"></i></button>
</div>
<div class="card-body">
body text here
</div>
</div>
Simply set div's display to either block or none to hide it.
let show = document.getElementById('show-button');
let divs = document.getElementsByName('container');
let hideButtons = document.getElementsByName('hide-button');
show.onclick = () => {
divs.forEach((d) => d.style.display='block');
}
hideButtons.forEach((b) => {
b.style.display='block';
b.onclick = () => b.parentNode.style.display='none';
});
<button id='show-button'>Show</button>
<div name='container'>
<button name='hide-button'>Hide 1</button>
</div>
<div name=container>
<button name='hide-button'>Hide 2</button>
</div>
<div name=container>
<button name='hide-button'>Hide 3</button>
</div>
<div name=container>
<button name='hide-button'>Hide 4</button>
</div>
I have a bunch of Bootstrap modals that open up depending on what button is clicked. One of them is a calculator which displays a value. I want the first click of one of the calculator buttons to clear the input (display screen of the calculator). I was trying to use .one() but after the modal closes, the calculator has the possibility of opening again displaying a new total. How can i clear the display on first click only, but that event can be reset once the modal closes, thus preserving my logic of clearing the screen on first click only?
// Determines button clicked via id
function myFunction(id) {
document.calc.result.value += id;
}
// Clears calculator input screen
function clearScreen() {
document.calc.result.value = "";
}
// Calculates input values
function calculate() {
try {
var input = eval(document.calc.result.value);
document.calc.result.value = input;
if ($('#calcValue').val() === 'I') {
$('#itemQTY').val(input);
} else if ($('#calcValue').val() === 'C') {
$('#cashEntered').val(input);
}
$('#calculatorModal').modal('hide');
clearScreen();
} catch (err) {
document.calc.result.value = "Error";
}
if ($('#calcValue').val() === 'CC') {
$('#creditCardModal').modal({
backdrop: 'static',
keyboard: false
});
}
if ($('#calcValue').val() === 'C') {
checkIfCashBack(input);
}
if ($('#calcValue').val() === 'SC') {
$('#starCardModal').modal({
backdrop: 'static',
keyboard: false
});
}
if ($('#calcValue').val() === 'P1' || $('#calcValue').val() === 'P2' || $('#calcValue').val() === 'P3' || $('#calcValue').val() === 'P4' || $('#calcValue').val() === 'P5') {
$('#discountValue').val(input);
var discountType = $('#discountType').val();
if (discountType === 'P1') {
$('#discountReasonCodeText').html('Price Override Reason Code');
$('#discountReasonSubFolder').html('Price discount (9)');
} else if (discountType === 'P2') {
$('#discountReasonCodeText').html('Dollar Item Discount Reason Code');
$('#discountReasonSubFolder').html('Dollar discount (9)');
} else if (discountType === 'P3') {
$('#discountReasonCodeText').html('Percent Item Discount Reason Code');
$('#discountReasonSubFolder').html('Percent discount (9)');
}
$('#discountReasonModal').modal({
backdrop: 'static',
keyboard: false
});
}
if ($('#calcValue').val() === 'PO') {
$('#paidOutConfirmModal').modal({
backdrop: 'static',
keyboard: false
});
}
}
<!-- calculator modal -->
<div class="modal fade" id="calculatorModal" tabindex="-1" role="dialog" aria-labelledby="calculatorModalLabel">
<div class="modal-dialog" role="document" style="width:20%">
<div class="">
<div class="modal-header row">
<div class="col-xs-12">
<div class="col-xs-2" id="calcGlyph">
</div>
<div class="col-xs-10">
<h4 class="modal-title" id="exampleModalLabel" style="padding-top: 4px;padding-left: 10px;"><span id="calcTag"></span></h4>
</div>
</div>
</div>
<div class="modal-body row">
<div class="container text-center" id="calc">
<div class="col-md-3" style="margin-left:13px;">
<div class="row" id="result">
<form name="calc">
<span class="glyphicon glyphicon-remove calcRemove" data-dismiss="modal" aria-label="Close"></span>
<input type="text" class="screen text-center" name="result" readonly>
<span class="glyphicon glyphicon-ok calcOK" onclick="calculate();"></span>
</form>
</div>
<div class="row dontShowCC">
<button id="allClear" type="button" class="btn btn-danger buttonCalc" style="padding-left:7px;" onclick="clearScreen()">Clear</button>
<button id="/" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">/</button>
<button id="*" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">*</button>
<button id="-" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">-</button>
</div>
<div class="col-xs-8" style="padding:0;margin-left:11px;">
<div class="row dontShowCC">
<button id="7" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">7</button>
<button id="8" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="margin-left:5px;">8</button>
<button id="9" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">9</button>
</div>
<div class="row dontShowCC">
<button id="4" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">4</button>
<button id="5" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">5</button>
<button id="6" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">6</button>
</div>
<div class="row dontShowCC">
<button id="1" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">1</button>
<button id="2" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">2</button>
<button id="3" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">3</button>
</div>
<div class="row dontShowCC" style="margin-left:-75px;">
<button id="0" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="margin-left:66px;width:112px;">0</button>
<button id="." type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)">.</button>
</div>
</div>
<div class="col-xs-2 dontShowCC">
<button id="+" type="button" class="btn btn-info buttonCalc" onclick="myFunction(this.id)" style="height:112px;margin-left:1px;">+</button>
<button id="equals" type="button" class="btn btn-success buttonCalc" style="padding-left:7px;margin-left:1px;height:108px" onclick="calculate()">Enter</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try simply removing the event handler on first click
$(document).on('click', 'button', function(){
$('input[name="result"]').val('')
$(document).off('click', 'button')
})
You could also tie into Bootstrap events like this
$('#myModal').on('shown.bs.modal', function () {
...
})
I want to create a dynamic survery webpage with JavaScript.
I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.
I know how to build this static but I wanted a dynamic solution for this problem.
Can anybody help?
Here is a schema of my problem
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Questions</title>
<script>
...
</script>
</head>
<body>
<header>A Dynamic Questionaire.</header>
<section>
<article>
<hgroup>
<h1>Questionaire</h1>
<h2>Anwer the questions in order as they appear.</h2>
</hgroup>
<div id="Question1" style="display:block;">
1.
<button type="button" id="btnYes1">Yes</button>
<button type="button" id="btnNo1">No</button>
</div>
<div id="Question2" style="display:none;">
2.
<button type="button" id="btnYes2">Yes</button>
<button type="button" id="btnNo2">No</button>
</div>
<div id="Question3" style="display:none;">
3.
<button type="button" id="btnYes3">Yes</button>
<button type="button" id="btnNo3">No</button>
</div>
<div id="Question4" style="display:none;">
4.
<button type="button" id="btnYes4">Yes</button>
<button type="button" id="btnNo4">No</button>
</div>
<div id="Question5" style="display:none;">
5.
<button type="button" id="btnYes5">Yes</button>
<button type="button" id="btnNo5">No</button>
</div>
<div id="Question5" style="display:none;">
6.
<button type="button" id="btnYes6">Yes</button>
<button type="button" id="btnNo6">No</button>
</div>
<div id="Question5" style="display:none;">
7.
<button type="button" id="btnYes7">Yes</button>
<button type="button" id="btnNo7">No</button>
</div>
<div id="Question5" style="display:none;">
8.
<button type="button" id="btnYes8">Yes</button>
<button type="button" id="btnNo8">No</button>
</div>
<div id="Question5" style="display:none;">
9.
<button type="button" id="btnYes9">Yes</button>
<button type="button" id="btnNo9">No</button>
</div>
<div id="Question5" style="display:none;">
10.
<button type="button" id="btnYes10">Yes</button>
<button type="button" id="btnNo10">No</button>
</div>
</article>
</section>
</body>
</html>
There are a ton of ways you could do this. A quick approach would be to put some information in the button that indicates where to take the user next. So here I've added a data-next value on each button that matches the id of the next panel to show, and I toggle a class in CSS to show/hide panels.
var buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function() {
var target = this.getAttribute('data-next');
for (var j = 0; j < questions.length; j++) {
var question = questions[j];
if (question.id == target) {
question.classList.add('show');
} else if (question.classList.contains('show')) {
question.classList.remove('show');
}
}
});
}
div {
display: none;
}
.show {
display: block;
}
<div id="Question1" class="show">
1.
<button type="button" data-next="Question2">Yes</button>
<button type="button" data-next="Question3">No</button>
</div>
<div id="Question2">
2.
<button type="button" data-next="Question4">Yes</button>
<button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
3.
<button type="button" data-next="Question6">Yes</button>
<button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
4.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
5.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
6.
<button type="button" data-next="Question7">Yes</button>
<button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
7.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
8.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
9.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
10.
</div>