I'm working on creating a simple calculator. I'm stuck on the display issue. I have all the buttons in the button class. When I try to display anything using for example $(".display").text(output); it doesn't work. I have a display class to be selected, it's under a tag that can have text, and output is a variable that is equal to something. I tried comparing with some other code I had that involved changing text with variables but I don't see what the issue is.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/styles.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="calculator-background row">
<p class="calc-title">Free Code Camp Calculator</p>
<div class="row answer-box"><p class="display"></p></div>
<div class="row">
<button type="button">AC</button>
<button type="button">CE</button>
<button type="button">%</button>
<button type="button">/</button>
</div>
<div class="row">
<button type="button">7</button>
<button type="button">8</button>
<button type="button">9</button>
<button type="button">*</button>
</div>
<div class="row">
<button type="button">4</button>
<button type="button">5</button>
<button type="button">6</button>
<button type="button">-</button>
</div>
<div class="row">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">+</button>
</div>
<div class="row">
<button type="button">.</button>
<button type="button">0</button>
<button type="button">Ans</button>
<button type="button">=</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="resources/calculator.js"></script>
</body>
</html>
JavaScript:
$(document).ready(function(){
var output = "";
/* Calculator buttons */
// only buttons are calculator buttons
$("button").click(function(){
// gets the text label of the button?
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "AC" && input !== "CE" && input !== "Ans" && input !== "=")
{
output += input;
}
else if(input === "=")
{
output = eval(output);
}
else if(input === "CE" && output.length > 0)
{
output = output.slice(0,-1);
}
else if(input === "AC" && output.length > 0)
{
output = "";
}
else if(input === "Ans")
{
output = output;
}
// test to see if output wasn't getting anything
output = 5;
// display result in display class, doesn't display anything
$(".display").text(output);
});
});
The problem is the color of your text is white
add this to your css
.display {
color: #000000;
}
Here is the updated fiddle : https://jsfiddle.net/2fyftj7a/1/
The font color inherited by <p class='display'></p> is white, so you can't see it.
Add this your .display class...
color: #000;
I think that you still have an issue where you check for:
output.length
you might have to change that to:
output.toString().length
Related
Please excuse me as if this seems like a simple question. I want to update the sum every time the space bar key is pressed down along with updating the innerHTML. Whenever I press the spacebar it just concatenates my sum variable instead of simply adding it.
HTML
<div class="sec1 sec">
<h1>Spacebar Challenge</h1>
</div>
<div class="sec2 sec">
<p>
You have hit the spacebar <span>0</span> times.
</p>
<div class='button'><button>Restart</button> </div>
</div>
<div class="sec3 sec"></div>
<script src="app.js"></script>
JS
let span = document.querySelector("span")
document.body.addEventListener("keyup", function (e) {
let sum = 0
if (e.code === "Space") {
sum += 1
}
span.innerHTML += sum
})
Try:
let span = document.querySelector("span")
let sum = 0
document.body.addEventListener("keyup", function(e) {
if (e.code === "Space") {
sum += 1
}
span.innerHTML = sum
})
<div class="sec1 sec">
<h1>Spacebar Challenge</h1>
</div>
<div class="sec2 sec">
<p>
You have hit the spacebar <span>0</span> times.
</p>
<div class='button'><button>Restart</button> </div>
</div>
<div class="sec3 sec"></div>
<script src="app.js"></script>
I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV">
<p> text </p>
</div>
</body>
</html>
You need to give it an initial style that hides it in the HTML.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" style="display: none;">
<p> text </p>
</div>
But inline styles are poor design, it's better to use a class with CSS.
function F1()
{
var x = document.getElementById("step1DIV");
x.classList.toggle("hidden");
}
.hidden {
display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" class="hidden">
<p> text </p>
</div>
I just defined it as 'none' to begin with as such:
<div id="step1DIV" style="display: none">
Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.
You can also try to run your function on page load.
You want to toggle the hidden attribute defined in the HTML Standard.
function F1 () {
document.getElementById("a").toggleAttribute("hidden");
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id=a>
<p> text </p>
</div>
</body>
</html>
How do you add css class to the first div(see below) if the span inside that div is "Yes". This div does not have an id. How do you search for this div and modify.
<div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0">
<div class="dx-button-content">
<span class="dx-button-text">Yes</span>
</div>
</div>
how about this?
var dxBtnText = document.querySelector('.dx-button-text').textContent;
if (dxBtnText == 'Yes') {
document.querySelector('.dx-button').classList.add('new-class-name');
}
I cannot apply DevExtreme css to the button, I tried with <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" /> but it does not load, but the below code in theory should work:
let btnElement = $('.dx-button');
let btnText = $(".dx-button-text").text();
console.log(btnText)
if (btnText == 'Yes') {
btnElement.addClass("dx-button-yes");
}
.dx-button-yes {
background-color: lightBlue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- dunno how to include DevExtreme in order to have your css -->
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.5/css/dx.common.css" />
<div class="dx-button dx-button-normal dx-widget dx-button-has-icon dx-button-has-text" role="button" aria-label="Yes" tabindex="0">
<div class="dx-button-content">
<span class="dx-button-text">Yes</span>
</div>
</div>
var dxBtnText = document.querySelectorAll(".dx-button-text");
dxBtnText.forEach(element => {
if (element.innerText == "Yes") {
element.parentNode.parentNode.classList.add("your-new-class-name");
}
});
I have a series of <p> tags and a button. I firstly want to hide all <p> tags and then on each subsequent button click, I want to display one of the <p> tags.
Right now I am using one button per <p> tag, keeping all other buttons hidden, but I want to know whether this can be done using only one button.
HTML
<p hidden id="p1">One</p>
<button id="button1">Show me more</button>
<p hidden id="p2">Two</p>
<button id="button1" style="display: none;">Show me more</button>
<p hidden id="p3">Three</p>
<button id="button1" style="display: none;">Show me more</button>
In JavaScript, I would display <p> and then display next button and hide this button
$(document).ready(function(){
$("#button1").click(function(){
$("#p1").show();
console.log("button clicked");
$("#button1").hide();
$("#button2").show();
});
});
Is there a better approach to do this? Maybe using just one button?
You can use a single button for this to show p elements one after another on each button click like:
$('#button1').click(function(){
var $p = $('p');
for(var i=0; i<$p.length; i++){
if($($p[i]).css('display') === 'none'){
$($p[i]).css('display', 'block');
break;
}
}
});
p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">One</p>
<p id="p2">Two</p>
<p id="p3">Three</p>
<p id="p4">Four</p>
<button id="button1">Show me more</button>
Since you're already using jquery....
You can use :hidden:first to select the first hidden item and show it.
As an added bonus, you can then check if there is not more to show and hide the button
//Do something on out button click
$("#showMore").click(function(){
//We've used the showMeMore class
//to hide and identify out paragraphs
//Show the first hidden paragraph
$(".showMeMore:hidden:first").show();
//Hide the button if there are no more visible.
if($(".showMeMore:hidden").length === 0) {
$(this).hide();
}
});
/*Use some CSS to hide our elements*/
.showMeMore{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="showMeMore">I'm parra one</p>
<p class="showMeMore">I'm parra two</p>
<p class="showMeMore">I'm parra three</p>
<button id="showMore">Show Me More</button>
Now lets get fancy and change the button to hide the paragraphs when we get all visible
//Do something on out button click
$("#showMore").click(function() {
//We've used the showMeMore class
//to hide and identify out paragraphs
if ($(this).data("mode") === "show") {
//Show the first hidden paragraph
$(".showMeMore:hidden:first").show();
//Change the button if there are no more hidden.
if ($(".showMeMore:hidden").length === 0) {
//Change the mode attribut and set some text
$(this).data("mode", "hide").text("Show Me Less");
}
} else {
//Hide the last visible paragraph
//console.log($(".showMeMore:visible:last"));
$(".showMeMore:visible:last").hide();
//Change the button if there are no more visible.
if ($(".showMeMore:visible").length === 0) {
//Change the mode attribut and set some text
$(this).data("mode", "show").text("Show Me More");
}
}
});
/*Use some CSS to hide our elements*/
.showMeMore {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="showMeMore">I'm parra one</p>
<p class="showMeMore">I'm parra two</p>
<p class="showMeMore">I'm parra three</p>
<!-- Note the addition of a data attribute -->
<button id="showMore" data-mode="show">Show Me More</button>
you can use core JavaScript Concept. For showing
document.getElementById('YourID').style.display="block"
For invisible
document.getElementById('YourID').style.display="none"
Here is the solution :https://codepen.io/creativedev/pen/oyEqdd
$(document).ready(function(){
$('p').hide();
$("button").on('click',function(){
var clicked = $(this).attr('id').match(/\d+/);
$("#p"+clicked[0]).show();
var nextbtn = parseInt(clicked[0])+1;
$("#button"+nextbtn).show();
});
});
var index = 1;
$(function() {
$("#button1").click(function(){
$("#p" + index).show();
index++;
});
});
<p hidden id="p1">One</p>
<p hidden id="p2">Two</p>
<p hidden id="p3">Three</p>
<button id="button1">Show me more</button>
I think this is what you are after, essentially the code below first hides all the p tags, then collects all the p tags in an array and then using recursion shows each one with each subsequent click on the button. It then alerts you to when all tags are displayed.
$(document).ready(function() {
let pTags = document.querySelectorAll('p')
pTags.forEach((tag) => {
tag.style.display = 'none'
})
let num = pTags.length - 1;
let i = 0
let show = function() {
if (i <= num) {
pTags[i].style.display = 'block'
i++
} else {
alert('All <p> tags are visible')
}
}
$('#button1').on('click', function() {
event.preventDefault()
show()
})
});
<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>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="test.js"></script>
</head>
<body>
<p>One</p>
<p>Two</p>
<p>Three</p>
<button id="button1">Show me more</button>
</body>
</html>
Put all paragaraph element under a div to specify scope and they can be handle by one button more easily.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide()
var ind=0
$("#btn").on("click",function(){
var obj=$("#block").children("p")[ind];
$(obj).show();
ind++
});
});
</script>
</head>
<body>
<div id="block">
<p>I m first</p>
<p>second</p>
<p>third</p>
<input id="btn" type="button" value="clickme"/>
</div>
</body>
</html>
Try this...
$(document).ready(function(){
$('p').hide();
var $p = $('p');
var count = 0;
$("button").on('click',function(){
count ++;
for(var i=1; i<=$p.length; i++){
if(i == count){
$("#p"+i).show();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" >Show me more</button>
<p id="p1">One</p>
<p id="p2">Two</p>
<p id="p3">Three</p>
<p id="p4">Four</p>
<p id="p5">Five</p>
See the approach below. Let me know if it is what you're after:
$(document).ready(function() {
$('.show-more').click(function() {
var toShow = $(this).attr('data-to-show');
if (!toShow)
return;
$('#' + toShow).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="p1">
<p>One</p>
<button class="show-more" data-to-show="p2">Show me more</button>
</div>
<div id="p2" style="display: none;">
<p>Two</p>
<button class="show-more" data-to-show="p3">Show me more</button>
</div>
<div id="p3" style="display: none;">
<p>Three</p>
<button class="show-more" data-to-show="p4">Show me more</button>
</div>
There are three buttons (button 1, button 2, and button 3) and three texts, (text 1, text 2, and text 3). Each text is right under its corresponding button. Imagine it like so,
[button 1]
..text 1..
[button 2]
..text 2..
[button 3]
..text 3..
The following conditions should apply,
When the document loads all texts should be hidden.
Clicking on a button who's corresponding text is hidden should show that text.
Clicking on a button who's corresponding text is shown should hide that text.
At most one text should be showing at any given time.
And if a text is shown, and I click the respective button, that text will be hidden. For example, if I clicked button 1, and text 1 shows. And I click button 1 again, text 1 should be hidden.
How can I achieve this effect?
I tried to do this just with 2 buttons, but I couldn't figure it out.
var show1 = false;
var show2 = false;
function showDearPresidentText() {
if(show1 == false && show2 == false) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="none";
show1 = true;
}
else if(show1 == true && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="none";
show1 = false;
}
else if(show1 == false && show2 == true) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="none";
show1 = true;
}
}
function showDearReaderText() {
if(show1 == false && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="block";
show2 = true;
}
else if(show1 == true && show2 == false) {
document.getElementById("text1").style.display="none";
document.getElementById("text2").style.display="block";
show1 = true;
}
else if(show1 == false && show2 == true) {
document.getElementById("text1").style.display="block";
document.getElementById("text2").style.display="block";
show1 = false;
}
}
Try using .css() , Next Adjacent Selector ("prev + next") with context set to this within click handler , .not()
$("button").click(function(e) {
var div = $("+ div", this);
div.css("display", div.css("display") === "block" ? "none" : "block");
$(this.nodeName + " + div").not(div).css("display", "none");
})
div {
display:none;
}
button {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button 0</button>
<div>text 0</div>
<button>button 1</button>
<div>text 1</div>
<button>button 2</button>
<div>text 2</div>
<button>button 3</button>
<div>text 3</div>
Try this one:
Change your CSS as per your requirment :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button1").click(function() {
$("#text1").toggle();
$("#text2").css("display", "none");
$("#text3").css("display", "none");
});
$("#button2").click(function() {
$("#text2").toggle();
$("#text1").css("display", "none");
$("#text3").css("display", "none");
});
$("#button3").click(function() {
$("#text3").toggle();
$("#text1").css("display", "none");
$("#text2").css("display", "none");
});
});
</script>
</head>
<body>
<div>
<div style="float:left">
<input type="button" name="button1" value="Button 1" id="button1">
<div id="text1" style="display:none">Text 1</div>
</div>
<div style="float:left">
<input type="button" name="button2" value="Button 2" id="button2">
<div id="text2" style="display:none">Text 2</div>
</div>
<div style="float:left">
<input type="button" name="button3" value="Button 3" id="button3">
<div id="text3" style="display:none">Text 3</div>
</div>
</div>
</body>
</html>
We are not here to write the full code samples for you, but here is the useful hint: acquire the clicked button's index in the body of .click() method and hide all text elements except the one with the same index.
Update: just in case anyone will be interested in my approach to this problem, here is the sample function (assuming all buttons have class 'button' and all texts class 'text'):
$('.button').click(function() {
index = $('.button').index(this);
$('.text').hide();
$('.text:eq(' + index + ')').show();
});
Here's a solution using bootstrap and jquery
Javascript:
//using jQuery
//show text on button click
$("button").click(function() {
$("p").addClass("hide");
switch (this.id) {
case "button-1":
$("p#text-1").removeClass("hide");
break;
case "button-2":
$("p#text-2").removeClass("hide");
break;
case "button-3":
$("p#text-3").removeClass("hide");
break;
default:
break;
} //close switch
}); //end tabs li click
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--jQuery-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--using Bootstrap-->
<button type="button" class="btn btn-default" id="button-1">Show Text 1</button>
<br/>
<p id="text-1" class="hide">Text 1</p>
<button type="button" class="btn btn-default" id="button-2">Show Text 2</button>
<br/>
<p id="text-2" class="hide">Text 2</p>
<button type="button" class="btn btn-default" id="button-3">Show Text 3</button>
<br/>
<p id="text-3" class="hide">Text 3</p>
<p class="debug"></p>
Hope this helps!
Please try the below modfied code.This is the sample code but you can get idea to figure out your problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').click(function() {
$('.btn').each(function() {
$(this).next().hide();
});
$(this).next().toggle();
});
});
</script>
<body>
<div>
<button class="btn">Button 1</button>
<h1 style="display:none">button's 1 text</h1>
</div>
<div>
<button class="btn">Button 2</button>
<h1 style="display:none">button's 2 text</h1>
</div>
<div>
<button class="btn">Button 3</button>
<h1 style="display:none">button's 3 text</h1>
</div>
</body>
Let me know if you have any doubt
Thanks