I have six buttons and I want to have all in one function. For each button is a different div available and if I click for example the third button, then should pop up the div for the third button.
javascript:
function kfunc(){
var x = document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6")
x.style.display = 'block';
x;
}
function closefunc(){
document.getElementById("id1"||"id2"||"id3"||"id4"||"id5" || "id6").style.display = 'none';
}
function testfunc(){
alert("test");
}
HTML:
<button id="btn1" onclick="kfunc()">Küche</button>
<button id="btn2" onclick="kfunc()">Bad</button>
<button id="btn3" onclick="kfunc()">Wohnzimmer</button>
<button id="btn4" onclick="kfunc()">Melina</button>
<button id="btn5" onclick="kfunc()">Kleines Bad</button>
<button id="btn6" onclick="kfunc()">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc()">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
It works almost! Logically when there is id1 available, it will use id1 and not the others. How can I fix it? Like I said: When btn3 is clicked then the div with id3 should show up but it always shows id1.
Look at your javascript. Actually you don't need to set id attribute for your buttons.
Just add your frame id as parameter to kfunc and closefunc function. Like this:
function kfunc(id) {
console.log(id)
document.getElementById(id).style.display = 'block'
}
function closefunc(id) {
console.log(id)
document.getElementById(id).style.display = 'none'
}
Usage:
onclick="kfunc('id1')"
onclick="closefunc('id1')"
Note: My solution is not tested. Hope you get the idea.
If you change your html to include a data attribute in the buttons, and to also pass 'this' in your onClick function call
<button id="btn1" data-div="id1" onclick="kfunc(this)">Küche</button>
<button id="btn2" data-div="id2" onclick="kfunc(this)">Bad</button>
And then in your function you can check which button was pressed, and display the appropriate div.
function kfunc(thispass) {
let fish = thispass.getAttribute('data-div');
document.getElementById(fish).style.display = 'block';
}
As for the close button. If you give all of the divs a common class, you can hide them all at once.
You can't use getElementById like this. you should use getElementByClassName or you can use the code below:
function kfunc(id){
var btn = id;
document.getElementById(id).style.display = 'block';
}
function closefunc(id){
var selectedDiv = id;
document.getElementById(id).style.display = 'none';
}
function testfunc(){
alert("test");
}
div[class^= "frame"]{
display: none;
}
<button id="btn1" onclick="kfunc('id1')">Küche</button>
<button id="btn2" onclick="kfunc('id2')">Bad</button>
<button id="btn3" onclick="kfunc('id3')">Wohnzimmer</button>
<button id="btn4" onclick="kfunc('id4')">Melina</button>
<button id="btn5" onclick="kfunc('id5')">Kleines Bad</button>
<button id="btn6" onclick="kfunc('id6')">Schlafzimmer</button>
<!-- Küche -->
<div class="frame_kueche" id="id1">
<div class="buttons_close">
<button onclick="closefunc('id1')">X</button>
</div>
<button onclick="testfunc()">ab</button>
</div>
<!-- Bad -->
<div class="frame_bad" id="id2">
<div class="buttons_close">
<button onclick="closefunc('id2')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Wohnzimmer -->
<div class="frame_wohnzimmer" id="id3">
<div class="buttons_close">
<button onclick="closefunc('id3')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Melina -->
<div class="frame_melina" id="id4">
<div class="buttons_close">
<button onclick="closefunc('id4')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- kleines Bad -->
<div class="frame_kleines_bad" id="id5">
<div class="buttons_close">
<button onclick="closefunc('id5')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
<!-- Schlafzimmer -->
<div class="frame_schlafzimmer" id="id6">
<div class="buttons_close">
<button onclick="closefunc('id6')">X</button>
</div>
<button onclick="testfunc()">a</button>
</div>
Related
I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>
I have the following snippets:
My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.
Use jQuery fully when you have it.
Although with your HTML and inline script this would work:
function show(target) {
$('.trigger').hide();
$("#"+ target).show();
}
As could this (but it would not work as a radio button more like a checkbox):
function show(target) {
$("#"+ target).toggle();
}
I strongly suggest you use unobtrusive code and move the script out of the HTML
$(function() {
$(".redButton").on("click",function() { // any button
$(".trigger").hide(); // hide the divs
$("#"+$(this).data("id")).show(); // show the relevant div
});
});
.trigger { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
<button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
<button type="button" class="redButton" data-id="addItem">Add Item</button>
<button type="button" class="redButton" data-id="searchItem">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
Search Customer
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
Add Customer
</div>
<div class="row trigger" name="addItem" id="addItem">
Add Item
</div>
<div class="row trigger" name="searchItem" id="searchItem">
Search Item
</div>
</div>
Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
.11..
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
.22..
</div>
<div class="row trigger" name="addItem" id="addItem">
.33..
</div>
<div class="row trigger" name="searchItem" id="searchItem">
.44..
</div>
</div>
Simpy use the JQuery toggle function like so
function show(target) {
$('#'+target).toggle();
}
You could replace your entire JS in the snippet to just these LOC. HTML remains the same.
function show(target) {
$('#'+target).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
Updated answer
function show(target) {
$("#Display").html( $('#' + target).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
Searching Customers
</div>
<div class="row trigger" name="addCustomer" id="addCustomer" hidden>
Customers added
</div>
<div class="row trigger" name="addItem" id="addItem" hidden>
Items added
</div>
<div class="row trigger" name="searchItem" id="searchItem" hidden>
Searching Items
</div>
<div id="Display">
</div>
</div>
The calculator works fine the first time through but after I use the reset button it quits working properly. (note: I only have the multiplication set up till I can debug this). I am just beginning to learn how to use JavaScript. Any help would be great.
Here is my HTML code:
var input = "";
var firstInput = "";
var secondInput = "";
var answer = "";
$(".numbers").click(function(){
$("#topBar").text(input += $(this).text())
});
function operation() {
firstInput = input;
$("#topBar").empty();
$(".numbers").click(function(){
$("#topBar").text(secondInput += $(this).text())
});
}
$("#buttonx").click(function(){
if(input !== ""){
operation();
}
});
$("#buttonEqual").click(function(){
answer = firstInput * secondInput;
$("#topBar").text(answer);
});
$("#resetButton").click(function(){
input = "";
firstInput = "";
secondInput = "";
answer ="";
$("#topBar").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">
<div id="topBar"></div>
<div class="row">
<div class="butStyle">
<button class="numStyle numbers" id="button7">7</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button8">8</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button9">9</button>
</div>
<div class="butStyle">
<button class="numStyle operation" id="buttonDivide">÷</button>
</div>
</div>
<div class="row">
<div class="butStyle">
<button class="numStyle numbers" id="button4">4</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button5">5</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button6">6</button>
</div>
<div class="butStyle">
<button class="numStyle operation" id="buttonx">x</button>
</div>
</div>
<div class="row">
<div class="butStyle">
<button class="numStyle numbers" id="button1">1</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button2">2</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="button3">3</button>
</div>
<div class="butStyle">
<button class="numStyle operation" id="buttonMinus">-</button>
</div>
</div>
<div class="row">
<div class="butStyle">
<button class="numStyle numbers" id="button0">0</button>
</div>
<div class="butStyle">
<button class="numStyle numbers" id="buttonDot">.</button>
</div>
<div class="butStyle">
<button class="numStyle" id="buttonEqual">=</button>
</div>
<div class="butStyle">
<button class="numStyle operation" id="buttonAdd">+</button>
</div>
</div>
<button id ="resetButton">Reset</button>
</div>
The problem comes from the fact you're registering a new click listener everytime you press an operator:
$(".numbers").click(function(){
$("#topBar").text(secondInput += $(this).text())
});
If you want to keep the logic that way (I'd refactor a lot of things :) ), you need to make sure to not call this piece of code if it has already been called.
the empty() function removes the child nodes of the selected element, i think you may want to just replace the content with something else (like an empty string or 0) or use the html() function instead.
I have a list of containers and I want to add a button that display a terminal on the container where we clicked on the terminal logo.
But I don't how to catch the index of the container in the list.
My HTML is :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs"> terminal </button>
</li>
And my JS :
'click .cmdLogs'(event) {
Session.set("displayCmdLogs",true);
//here I need to do something to get the ID with the event and then I could do...
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
I'm assuming the id you want to catch is "idContainer". I'd modify your HTML as follows :
<li class="liContainer">
<div>
<h3>{{nameContainer}}</h3>
</div>
<div id="idContainer">
<span>ID: {{idContainer}}</span>
</div>
<div id="stateContainer">
<span class="state">State: {{stateContainer}}</span>
</div>
<div id="terminalContainer" class="hidden">
<div class="terminal hidden"></div>
</div>
<button type="button" class="stop {{#if to_hide_stop}}hidden{{/if}}"> </button>
<button type="button" class="start {{#if to_hide_start}}hidden{{/if}}"> </button>
<button type="button" class="pause {{#if to_hide_pause}}hidden{{/if}}"></button>
<button type="button" class="unpause {{#if to_hide_unpause}}hidden{{/if}}"> </button>
<button type="button" class="cmdLogs" id="{{idContainer}}"> terminal </button>
</li>
And you js :
'click .cmdLogs'(event, template) {
Session.set("displayCmdLogs",true);
var id = event.currentTarget.id; //The id is here
setTimeout(function(){
var term = new Terminal();
console.log("term: " + term);
//.. the getElement on the right one
term.open(document.getElementsByClassName('terminal')[idFromEvent]);
//term.fit();
term.write('Hello from container.js');
},200);
}
I have DIVs generated by ng-repeat and inside them I have inner DIVs. I would like the inner DIVs to be visible when a user click on the outer DIVs. An inner DIV must be visible only when its outer DIV is clicked. I implemented it with $scope.bot variable and it's not working as I want since when one outer DIV is clicked, all the inner DIVs of the other outer DIVs become visible (this is because they all depend on the $scope.bot variable).
I would like to also click on the outer div again and the inner DIV if it is visible then it will disappear.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog()">
{{course .name}}
<div ng-show="bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
</div>
$scope.bot = false;
$scope.tog = function(){
if(!$scope.bot ){
$scope.bot = true;
}
}
This is an option:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="tog($index)">
{{course .name}}
<div ng-show="bot[$index]== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.bot = [];
$scope.tog = function(index){
$scope.bot[index] = !$scope.bot[index];
}
Just place the visibility flag on the course object itself, so every course will have it's own flag:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog(course)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(course){
if(!course.bot ){
course.bot = true;
}
}
Try this
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="course.bot = !course.bot">
{{course .name}}
<div ng-show="course.bot === true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
A simple way to do this is to remove everything regarding divs appearing and disappearing from controller and handle everything in the template.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-init="bot=false" ng-click="bot = !bot">
{{course .name}}
<div ng-show="bot">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
You can initialize the bot variable at each parent div level because ng-repeat creates a new scope for every element.
This issue you are having because you are using one bot variable which is associated to all divs.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog($index)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(index){
$scope.courses[index].bot = !$scope.courses[index].bot;
}