I am designing a website and I want to show the content just when they click on a button and hide when they click again.
I was able to find a solution but I have to write a different function for all buttons. I tried a few things but couldn't make it. I'll be so glad if you help me. ;)
I hide the buttons by display: none; and the button works with this function :
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
I have to write a different function for all button.
is there a way that I use this for all?
I tried this but it didn't work :
function funcategory(x) {
var a = document.getElementById(x);
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
and here's the content which has to be shown whrn the button click(and be hiden when clicked again):
<!--category------------------------------------------------->
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
here is the main button:
<button id="topbtn" onclick="funcategory()">Category</button
here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
First of all id cannot be duplicate. You can use class as an alternative. and use document.querySelectorAll to get all the buttons. Also add an attribute data-type you can name it any thing but has to have data- as prefix & data-button value will be used to target the section which will be hidden/shown. For example check the data-type of the section. After that you can use classList.toggle which will hide/remove class to toggle the visibility
document.querySelectorAll('.topbtn').forEach(function(item) {
let getBtnData = item.dataset.button;
item.addEventListener('click', function(e) {
document.querySelector('[data-type="' + getBtnData + '"]').classList.toggle('visibility')
})
})
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#category {
display: none;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
display: none;
}
.visibility {
display: block !important;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button class="topbtn" data-button='contact'>Contact us</button>
<button class="topbtn">Random</button>
<button class="topbtn" data-button='category'>Category</button>
<!--<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>-->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category" data-type='category'>
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus" data-type='contact'>
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
function funcategory(elem) {
if (elem.style.display === "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
}
<div id="category">
<center>
<button id="categorybtn" onclick="funcategory(this)">Actors</button>
<button id="categorybtn" onclick="funcategory(this)">Singers</button>
<button id="categorybtn" onclick="funcategory(this)">Instagram user</button>
<button id="categorybtn" onclick="funcategory(this)">Model</button>
<button id="categorybtn" onclick="funcategory(this)">Others</button>
<button id="categorybtn" onclick="funcategory(this)">XXX</button>
</center>
</div>
<!DOCTYPE html>
<html>
<head>
<title>balalar</title>
<style>
body{
background-color: #ff5993; }
#topbtn{
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#categorybtn{
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;}
#category{
display: none;}
#contactus{
background-color: #dddddd;
font-size: 25px;
display: none;}
</style>
<script>
function funcategory() {
var a = document.getElementById("category");
if (a.style.display === "") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head>
<body>
<h1 color="#0e0a0e"><center>BALALAR</center></h1>
<center>
<button id="topbtn" onclick="funcontact()">Contact us</button>
<button id="topbtn">Random</button>
<button id="topbtn" onclick="funcategory()">Category</button>
<button id="topbtn">All</button>
<button id="topbtn">Mine</button>
<button id="topbtn">Top</button>
<button id="topbtn">Log in</button>
</center>
<hr color="black" style="height: 3px; width: 1100px"/>
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="category">
<center>
<button id="categorybtn">Actors</button>
<button id="categorybtn">Singers</button>
<button id="categorybtn">Instagram user</button>
<button id="categorybtn">Model</button>
<button id="categorybtn">Others</button>
<button id="categorybtn">XXX</button>
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactus">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
<center>
</div>
</body>
</html>
you want to show the content when the Category button is clicked and you want to hide the content if the category button is clicked again. Is that what you want ?
If so instead of checking
if (a.style.display === "none")
you can check as
if (a.style.display === "")
If you want to avoid javascript all together, you can do this with a check box and some fancy css.
Here we use the label tag with an associated check box. Clicking the label toggles the status of the checkbox. We can then use the :checked pseudo class with ~ , the Adjacent sibling selector to toggle display:none;
/*This is the magic - Hide the div next to a checkbox that is checked.
It will show when unchecked courtesy of the associated label */
.toggler:checked + div {
display:none;
}
/*HIde our toggling checkboxes*/
.toggler {display:none;}
body {
background-color: #ff5993;
}
.centered {
text-align:center;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#contactus {
background-color: #dddddd;
font-size: 25px;
}
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<div class="centered">
<label class="topbtn" for="cb-contact">Contact us</label>
<label class="topbtn">Random</label>
<label class="topbtn" for="cb-category">Category</label>
</div>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-category" class="toggler" checked />
<div id="category" data-type='category' class="centered">
<button class="categorybtn">Actors</button>
<button class="categorybtn">Singers</button>
<button class="categorybtn">Instagram user</button>
<button class="categorybtn">Model</button>
<button class="categorybtn">Others</button>
<button class="categorybtn">XXX</button>
</div>
<!--contact us----------------------------------------------->
<!--set to checked so next div is hidden by default -->
<input type="checkbox" id="cb-contact" class="toggler" checked />
<div id="contactus" data-type='contact' class="centered">
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</div>
You should also note the center tag is obsolete and should no longer be used. Use CSS instead. And as everyone else has mentioned, id must be unique on the page, use classes instead.
1) Don't use the same id to define elements, it must be unique in a document..
2) You can send the id: onclick="funcategory(this.id)" to differentiate which one you want to manipulate.
3) Example of reusable function:
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
4) You forgot to close center tag. Which are obsolete by now, alternatively you could use CSS text-align: center;
body {
background-color: #ff5993;
}
.topbtn {
background-color: #bf42f4;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
.categorybtn {
background-color: #ff7700;
border: none;
padding: 10px;
font-size: 20px;
border-radius: 6px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
color: #0e0a0e;
cursor: pointer;
}
#categorycontent {
display: none;
}
#contactcontent {
background-color: #dddddd;
font-size: 25px;
display: none;
}
<script>
var funcategory= function(e) {
var a = document.getElementById(e+'content');
if (a.style.display != "block") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
<h1 color="#0e0a0e">
<center>BALALAR</center>
</h1>
<center>
<button id="contact" class="topbtn" onclick="funcategory(this.id)">Contact us</button>
<button id="random" class="topbtn">Random</button>
<button id="category" onclick="funcategory(this.id)" class="topbtn">Category</button>
<button id="all" class="topbtn">All</button>
<button id="mine" class="topbtn">Mine</button>
<button id="top" class="topbtn">Top</button>
<button id="login" class="topbtn">Log in</button>
<!-- do not ^^^ use same id -->
</center>
<hr color="black" style="height: 3px; width: 1100px" />
<!--invisible----------------------------------------------->
<!--category------------------------------------------------>
<div id="categorycontent">
<center>
<button id="actor" class="categorybtn">Actors</button>
<button id="singer" class="categorybtn">Singers</button>
<button id="iguser" class="categorybtn">Instagram user</button>
<button id="label" class="categorybtn">Model</button>
<button id="other" class="categorybtn">Others</button>
<button id="xxx" class="categorybtn">XXX</button>
<!-- do not ^^^ use same id -->
</center>
</div>
<!--contact us----------------------------------------------->
<div id="contactcontent">
<center>
<p>instagram: #iammgt</p>
<p>telegram: #iammgt</p>
<p>phone: 0935-185-1433</p>
<p>phone2: 0990-4631983</p>
</center>
<!-- << notice missing / >
</div>
Related
I'm creating a "social media comment section" (you can add your own comments by typing in a comment box at the bottom.) I want to add an edit button which can change as to what ever comment the edit button was clicked on. I am very unfamiliar with how do to do this. I've tried adding a click function that creates a text box where you can put text into but it creates the text box on every comment that has an edit button. How can I make the "Edit" button more specific to which ever comment was clicked?
$(document).ready(function(){
let value;
let storeValues = []
let storeValueName;
let storeValueComment;
$('#addComment').click(function(){
storeValueName = getName();
storeValueComment = getComment();
storeValues.push(storeValueName);
storeValues.push(storeValueComment);
value = getName() + getComment();
function getName(){
let grabName;
$('#name').val(function(i, v){
grabName = v;
})
return grabName;
}
function getComment(){
let grabComment;
$('#bodyText').val(function(i, v){
grabComment = v;
})
return grabComment
}
console.log(storeValues);
$('.eachComment').prepend('<div class="comments">' +'<img class="imgClass" src="userImage.jpg">'+'<p class="nameVal">'
+ storeValueName +'</p>' + '<p class="commentVal">'+ storeValueComment +'</p>'+
'<input type="button" id="edit" value="Edit" />'+ '<input type="button" id="delete" value="Delete" />' + '</div>');
$('#edit').click(function(){
})
})
})
body{
background-color: #E5E5E5
}
#wholeForm{
margin: 0 auto;
width: 800px;
height: 400px;
position: relative;
background-color: #D3D3D3;
font-family: helvetica;
}
#question{
padding: 0px;
margin: 0px;
width: 780px;
height: 75px;
background-color: white;
padding:10px;
}
#nameOfPerson{
font-size:13px;
margin: 0;
padding: 0;
}
#commentOfPerson{
font-size:25px;
font-weight: bold;
margin: 0;
padding: 0;
}
.form2{
width: 800px;
height: 458px;
}
.comments{
background-color: white;
width: 780px;
height: 75px;
position: relative;
margin: 10px;
}
.form1{
padding:20px;
margin-bottom: 10px;
width: 758px;
position: absolute;
bottom: -10px;
background-color: white;
}
#addComment{
display: inline-block;
margin-left: 35px;
}
#name{
width: 125px;
}
#bodyText{
width: 500px;
}
.formInput{
display: inline-block;
}
.nameVal{
display: inline-block;
font-size: 12px;
position: absolute;
}
.commentVal{
display: inline-block;
position: absolute;
font-weight: bold;
font-size: 18px;
bottom: 5px;
}
.imgClass{
display: inline-block;
height: 65px;
width: 65px;
margin: 5px;
}
#edit{
position: absolute;
right:55px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#delete{
position: absolute;
right:0px;
border: none;
text-decoration: underline;
color:#30D5C8;
background-color:white;
margin:5px;
}
#edit:hover{
color:#DDA0DD
}
#delete:hover{
color:#DDA0DD
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='style.css' type='text/css' rel='stylesheet' />
</head>
<body>
<div id='wholeForm'>
<div id="question">
<p id="nameOfPerson">WhySoSerious45</p>
<p id="commentOfPerson">Trying to decide a career path? Programming is the move. Change my mind.</p>
</div>
<div class='form2'>
<div class='eachComment'>
<div class="comments">
<img class="imgClass" src="userImage.jpg">
<p class="nameVal">Jonny R</p>
<p class="commentVal">I wish I knew how to program! Maybe ill start learning?</p>
<input type="button" id="edit" value="Edit">
<input type="button" id="delete" value="Delete">
</div>
</div>
</div>
<div class='form1'>
<div class='formInput'>
<input type="text" id="name" placeholder="Display Name"/>
<input type='text' id="bodyText" placeholder="Comment"></textarea>
</div>
<input type="button" id="addComment" value="Submit">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.slim.min.js" integrity="sha256-MlusDLJIP1GRgLrOflUQtshyP0TwT/RHXsI1wWGnQhs=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
To answer your question in a general sense…
When you add an event listener, the specific element will show up on the event's target property. So, if we had something like this:
<div class="posts">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
We could actually add a click handler to the div, because events "bubble" up to it.
document.querySelector('.posts').addEventListener('click' (e) => {
console.log(e.target.textContent); // Button 1, Button 2, etc.
});
I am trying to make this website about time management for a project at school. I am trying to create a input (text box) that when the button "add task" is click it is placed (the text inside of it) in a paragraph or p2 and then the input is moved down.
This I think is the problematic section:
Sorry I have posted all the html, css, and Javascript in the html section of the code snippet
Please I really need help
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
function generateRow() {
var d = document.getEleme ntById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I think this is the problematic part
function addtask() {
var 1 = document.getElementById("first").value;
document.getElementById("p1").innerHTML = var 1;
{
This image is what it looks like. As you can see the text box is where you put in the task you want or other input and then when you click the green button it will place it will place it above the current input box as a p2 and then the user is able to add another task.
I know there is a lot of extra code however, I hope you get the basic idea
Something like this
You can't name a variable as a number. You'd need to name it something else - also note you shouldn't have the var when you're using the variable.
var val = document.getElementById("first").value;
document.getElementById("p1").innerHTML = val;
Here you go.
Obviously you can't add rows because that function isn't created yet
As an advice I suggest you to use placeholder in your input instead of value.
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
<font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
<div>
<h2> Today <span class= "june13">June 13</span></h2>
<div class="line1">
<div> <br>
<div id= "bonus">
<p id= "p1"> </p>
</div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>
<div>
<button class="button" onclick ="addtask()"> Add Task </button>
<div id="div">
<button onclick ="appendRow()" value="Add Row">Add Row</button>
</div>
<div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
</div>
</div>
</div>
</div>
</div>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;
}
.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line1 {
width: 30%;
height: 2px;
background-color: #666;
opacity: 0.50;
margin-bottom: 10px;
}
.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}
.button:hover {
background-color: #3e8e41
}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
input {
margin-bottom: 10px;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function generateRow() {
var d = document.getElementById('div');
d.innerHTML+="<p><input type='text' name='food'>";
}
</script>
</body>
</html>
I have spent a good amount of time researching this question, but i cannot seem to find an answer.
I am simply trying to change the color of my buttons as i click on them. Currently, the buttons register, but does not recognize a change in the background color. The code goes through and filters data as well, hence the extra additional function. I know this is extremely simple, but I cant seem to identify the button background and change it!
CSS:
.button {
position: relative;
width: 70px;
padding: 5px 5px;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
text-align: center;
font-size: .65em;
border: .5px solid #e0e0e0;
float: left;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(255, 255, 255);
}
.button:hover {
background: #e0e0e0;
}
.button.current {
background: #242424;
color: #fff;
}
HTML:
<div class="buttons">
<div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1')">Button 1</div>
<div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2')">Button 2</div>
<div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3')">Button 3</div>
<div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4')">Button 4</div>
</div>
Javascript:
// Shared function
function filterData() {
var newData = _(site_data).filter(function(site) {
return site[buildingType] < minYear;
});
displaySites(newData);
return newData.length;
}
function buttonClick(filterField) {
if (filterField !== undefined) {
//console.info('Changing building filter to', filterField);
buildingType = filterField;
}
//console.info('Applying filter');
filterData();
//click to change color of button background
var backgroundColor = document.getElementById('option')
function buttonClick(backgroundColor) {
if (backgroundColor.onclick == true) {
option.style.backgroundColor = "#0fe417";
} else {
option.style.backgroundColor = "#0029ff";
}
}
}
i just pass the element to the function and change the background color:
[Update with color reset!!]
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
<div class="buttons">
<div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1',this)">Button 1</div>
<div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2',this)">Button 2</div>
<div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3',this)">Button 3</div>
<div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4',this)">Button 4</div>
</div>
<style> .button {
position: relative;
width: 70px;
padding: 5px 5px;
margin-right: 3px;
margin-bottom: 3px;
cursor: pointer;
text-align: center;
font-size: .65em;
border: .5px solid #e0e0e0;
float: left;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(255, 255, 255);
}
.button:hover {
background: #e0e0e0;
}
.button.current {
background: #242424;
color: #fff;
}
</style>
<script>
// Shared function
function filterData() {
//just comment for hide a error
//var newData = _(site_data).filter(function(site) {
// return site[buildingType] < minYear;
//});
//displaySites(newData);
//return newData.length;
}
function buttonClick(filterField,element) {
element.style.backgroundColor ="red"
var backgroundColor = document.getElementById('option');
buttonClickColor(backgroundColor,element);
if (filterField !== undefined) {
//console.info('Changing building filter to', filterField);
buildingType = filterField;
}
//console.info('Applying filter');
filterData();
//click to change color of button background
function buttonClickColor(backgroundColor,element) {
//reset color
Array.from(document.getElementsByClassName("button")).forEach(function (button,index){
button.style.backgroundColor = "white";
})
if (backgroundColor.onclick == true) {
element.style.backgroundColor = "#0fe417";
} else {
element.style.backgroundColor = "#0029ff";
}
}
}
</script>
const buttons = [...document.querySelectorAll(".button")];
buttons.forEach(item => {
item.addEventListener("click", e => {
console.log(e.target.dataset.val)
buttons.forEach(item => {
item.classList.remove("current");
});
e.target.classList.add("current");
filterData(); //and other code...
});
});
use e.target.dataset instead buttonClick('b2')
I'm trying to manage triggered events on buttons but I can't get the exact result. By default, the div id="mailArea" is displayed but when I click on web button, I would like that this div is hidden and vice-versa.
Can someone help me please?
Thanks in advance!
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#mailwebArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
<div id="choiceMail">
<input type= "radio" name="mail_type" value="text" onchange="$('#result').hide()" checked > Texte
<input type="radio" name="mail_type" value="web" onchange="$('#result').show()"> Web
<div>
<div id="mailArea"></div>
</div>
</div>
<div id="result" style="display:none">
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-weight: https://jsfiddle.net/t44aqpw0/3/#forkbold; font-size: 12px;' onclick='commande('bold');' title='Mettre votre en gras'>G</button>
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('italic');' title='Mettre votre texte en italique'>I</button>
<button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('underline');' title='Soulignez votre texte'>S</button> <button class='btn btn-primary btn-md' onclick='taille('+', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Augmenter la taille du texte'><span class='glyphicon glyphicon-plus'></span> </button>
<button class='btn btn-primary btn-md' onclick='taille('-', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Diminuer la taille du texte'><span class='glyphicon glyphicon-minus'></span> </button>
<div id='mailwebArea' class='form-control animated' contenteditable='true'></div>
<div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Here is a simple show/hide of your 'mailArea' div based on radio buttons selections:
$('input[type=radio][name=mail_type]').on('change', function() {
if ($(this).val() == 'text') {
$('#mailArea').show();
} else if ($(this).val() == 'web') {
$('#mailArea').hide();
}
});
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#mailwebArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choiceMail">
<input type="radio" name="mail_type" value="text" checked> Texte
<input type="radio" name="mail_type" value="web"> Web
<div>
<div id="mailArea">Mail area container</div>
</div>
</div>
$(document).ready(function() {
$("input[name$='cars']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myRadioGroup">
Texte<input type="radio" name="cars" checked="checked" value="2" />
Web<input type="radio" name="cars" value="3" />
<div id="Cars2" class="desc">
Display
</div>
</div>
You can add $('#mailArea').hide() on onchange attribute of input[type=radio]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choiceMail">
<input type= "radio" name="mail_type" value="text" onchange="$('#result').hide();$('#mailArea').show();" checked > Texte
<input type="radio" name="mail_type" value="web" onchange="$('#result').show();$('#mailArea').hide();"> Web
<div>
<div id="mailArea">mailArea</div>
</div>
</div>
Track the button onclick event. From there, check if div is currently shown. If yes then hide it. If hidden, then show it.
$('#yourButtonId').on('click', function(){
var divElement = $('#yourDivId');
var isVisible = divElement.is(':visible');
if(isVisible == true){
divElement.hide();
}
else {
divElement.show();
}
});
I have been working on a calculator as a learning project for myself. It is working fine except I cannot figure out how to stop people from adding app breaking inputs such as 1++-*/4. I have tried various things like splitting my current display into an array and comparing it to another array with all the operators. I have also tried if(output.includes(input){ blah blah }.
I tried adding an extra else if to the getbuttonpress which went something like this else if(input == "*" || input == "+" || input == "/" || input = "-"){do something}
It didn't really work out for me.
Could someone please explain some different methods that I could use to resolve the issue?
Here is my code:
var resultDisplayed = false;
function getButtonPress() {
var input = this.value;
if (input == "=") {
console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
console.log(input);
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the below code to your getButtonPress function
It will check whether both the current input and previous entry are operators.
If yes, it will replace the previous operator with new one
var element=document.getElementById("output");
if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
}
var resultDisplayed = false;
function getButtonPress() {
var input;
var element=document.getElementById("output");
if (/[+-\/*]/.test(this.value) && /[+-\/*]$/.test(element.innerHTML)) {
element.innerHTML = element.innerHTML.replace(element.innerHTML[element.innerHTML.length - 1], '');
}
input = this.value;
if (input == "=") {
console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Added try catch statement.
It may not be the best solution. You should build some kind of parser, but this will also work very well.
var resultDisplayed = false;
//1++-*/4
function getButtonPress() {
var input = this.value;
if (input == "=") {
//console.log("bang");
getResult();
} else if (resultDisplayed && input < 10) {
document.getElementById("output").innerHTML = input;
resultDisplayed = false;
} else {
document.getElementById("output").innerHTML += input;
//console.log(input);
resultDisplayed = false;
}
}
window.onload = function() {
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
};
function getResult() {
try{
var result = document.getElementById("output").innerHTML;
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}catch(e){
console.log("Invalid expression");
document.getElementById("output").innerHTML = 0;
}
}
/* Fonts from Google Fonts - more at https://fonts.google.com */
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class = "number">7</h1>
</button>
<button class="button" value="8">
<h1 class = "number">8</h1>
</button>
<button class="button" value="9">
<h1 class = "number">9</h1>
</button>
<button class="button" value="+">
<h1 class = "number">+</h1>
</button>
<button class="button" value="4">
<h1 class = "number">4</h1>
</button>
<button class="button" value="5">
<h1 class = "number">5</h1>
</button>
<button class="button" value="6">
<h1 class = "number">6</h1>
</button>
<button class="button" value="-">
<h1 class = "operator">-</h1>
</button>
<button class="button" value="1">
<h1 class = "number">1</h1>
</button>
<button class="button" value="2">
<h1 class = "number">2</h1>
</button>
<button class="button" value="3">
<h1 class = "number">3</h1>
</button>
<button class="button" value="*">
<h1 class = "operator">*</h1>
</button>
<button class="button" value=".">
<h1 class = "operator">.</h1>
</button>
<button class="button" value="0">
<h1 class = "number">0</h1>
</button>
<button class="button" value="=">
<h1 class = "operator">=</h1>
</button>
<button class="button" value="/">
<h1 class = "operator">/</h1>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
The final else in getButtonPress has to look like this:
else {
var operators = ["+", "-", "*", "/", "."],
lastCharacter = document.getElementById("output").innerHTML[document.getElementById("output").innerHTML.length - 1];
if(!operators.includes(lastCharacter) || !operators.includes(input)){
document.getElementById("output").innerHTML += input;
console.log(input);
resultDisplayed = false;
}
}
Intuitively,
!operators.includes(lastCharacter) || !operators.includes(input)
can be thought of as the logical expression
operators.includes(lastCharacter) → ¬operators.includes(input)
which means “if the last character is an operator, the next input isn’t an operator”. if this is the case, the symbol is added to the output screen, otherwise it isn’t.
This still won’t prevent you from entering numbers like 2.5.6 or ending the expression with an operator, but this solves the described problem.
another option, delete 0 in start and delete operands in last character when getResult() called
var resultDisplayed = false;
function getButtonPress() {
var input = this.value,
output = document.getElementById("output");
if(input == "=") {
//console.log("bang");
getResult();
}
else if(resultDisplayed && input < 10) {
output.innerHTML = input;
resultDisplayed = false;
}
else {
//console.log(input);
var currentValue = output.innerHTML;
// start with 0 + digit, delete it
if((currentValue+input).match(/^0\d/)){
input = input;
}
// end with +-*/ delete it
else if(currentValue.match(/[-\+\*\/]$/) && input.match(/[-\+\*\/]/)) {
input = currentValue.slice(0, -1) +''+ input;
}
else{
input = currentValue + input
}
output.innerHTML = input;
resultDisplayed = false;
}
}
[].slice.call(document.getElementsByClassName("button")).forEach(function(e) {
e.addEventListener('click', getButtonPress);
});
function getResult() {
var result = document.getElementById("output").innerHTML;
if(result.match(/[-\+\*\/]$/))
result = result.slice(0, -1);
var resultCalculated = eval(result);
console.log(resultCalculated);
document.getElementById("output").innerHTML = resultCalculated;
resultDisplayed = true;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
#import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #444;
text-align: center;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
#calculator {
width: 250px;
height: 400px;
position: absolute;
background-color: grey;
padding: 15px;
box-shadow: 5px 5px 5px 5px;
margin: auto;
}
.button {
width: 19%;
height: 70px;
box-shadow: 1px 1px 1px 1px;
border: 1px solid black;
display: inline-block;
margin: 5px;
}
.buttonContainer {
width: 95%;
margin: auto;
margin-top: 10px;
}
#screen {
width: 90%;
height: 15%;
background-color: green;
margin: auto;
color: white;
text-align: right;
overflow: hidden;
}
<h1>Calculator</h1>
<div id="calculator">
<div id="screen">
<h1 id="output">0</h1>
</div>
<div class="buttonContainer">
<button class="button" value="7">
<h1 class="number">7</h1>
</button>
<button class="button" value="8">
<h1 class="number">8</h1>
</button>
<button class="button" value="9">
<h1 class="number">9</h1>
</button>
<button class="button" value="+">
<h1 class="number">+</h1>
</button>
<button class="button" value="4">
<h1 class="number">4</h1>
</button>
<button class="button" value="5">
<h1 class="number">5</h1>
</button>
<button class="button" value="6">
<h1 class="number">6</h1>
</button>
<button class="button" value="-">
<h1 class="operator">-</h1>
</button>
<button class="button" value="1">
<h1 class="number">1</h1>
</button>
<button class="button" value="2">
<h1 class="number">2</h1>
</button>
<button class="button" value="3">
<h1 class="number">3</h1>
</button>
<button class="button" value="*">
<h1 class="operator">*</h1>
</button>
<button class="button" value=".">
<h1 class="operator">.</h1>
</button>
<button class="button" value="0">
<h1 class="number">0</h1>
</button>
<button class="button" value="=">
<h1 class="operator">=</h1>
</button>
<button class="button" value="/">
<h1 class="operator">/</h1>
</button>
</div>
</div>
Here is the Code that will not accept multiple operands
function calc(opr)
{
var a2=0;
var a1 = cal.display.value;
a2 = a1.charAt(a1.length-1);
if(a2 == '/' || a2 == '+' || a2 == '-' || a2 == '*')
{
cal.display.value = a1.substring(0,a1.length-1);
cal.display.value += opr;
}
else
{
cal.display.value+= opr;
}
}
Whenever you click any operand button you need to take the last val from the input and see if its one of the operands, if it is skip like below.
$('#button-plus').click(function() {
var lastChar = $('#disp').val().slice(-1);
var firstChar = $('#disp').val().slice(0);
if (lastChar == '*' || lastChar == '-' || lastChar == '+' || lastChar == '/' || lastChar == '.' || lastChar == '(' || lastChar == '%'){
// DO NOTHING
}
else if (firstChar == '0'){
// DO NOTHING
}
else {
addChar(this.form.display, '+');
}
$('#disp').removeClass("result");
dotCount = 0;
});