i am trying to save the value of calculator's tab when you reload the page and set the button to save and put value in calculator ( sry for broken english ).
I just can not link the calculator's tab and cookies.
> <!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-cookies.js"></script>
</head>
<body ng-controller="kyk">
<p>{{ $cookies.get('cookie') }}</p>
<input type="text" ng-model="cookieVal">
<button ng-click="setCookie(cookieVal)">update</button>
<div ng-controller="CalculatorController">
<br> <span id="myFavorite" >{{formula.join('')}}</span> <br><br><br>
<button ng-click="add(7)">7</button>
<button ng-click="add(8)">8</button>
<button ng-click="add(9)">9</button>
<button ng-click="add('/')">/</button><br>
<button ng-click="add(4)">4</button>
<button ng-click="add(5)">5</button>
<button ng-click="add(6)">6</button>
<button ng-click="add('*')">*</button><br>
<button ng-click="add(1)">1</button>
<button ng-click="add(2)">2</button>
<button ng-click="add(3)">3</button>
<button ng-click="add('-')">-</button><br>
<button ng-click="add(0)">0</button>
<button ng-click="add('.')">.</button>
<button ng-click="add('+')">+</button>
<button ng-click="eval()">=</button> <br>
<button ng-click="remove()">CLEAR</button>
<button ng-click="save">SAVE</button>
<button ng-click="put(formula.join(''))">PUT</button>
</div>
</body>
</html>
app = angular.module('app',['ngCookies',])
app.controller('kyk', function ($scope, $cookies) {
$scope.$cookies = $cookies;
$scope.myCookieVal = $cookies.get('cookie');
$scope.setCookie = function (val) {
$cookies.put('cookie', val);
};
});
app.controller('CalculatorController', function ($scope, $cookies) {
$scope.$cookies = $cookies;
$scope.formula = [0];
$scope.add = function (item) {
if($scope.formula == 0) $scope.formula = [item];
else $scope.formula.push(item);
};
$scope.remove = function () {
$scope.formula.pop();
if($scope.formula = ['']) $scope.formula = [0];
};
$scope.eval = function () {
var result = eval($scope.formula.join(''));
$scope.formula = [result];
$cookies.get('formul', $scope.formula.join(''));
$cookies.put('formul', )
};
$scope.save = function() {
$cookies.getObject('save');
};
$scope.put = function (value) {
$cookies.putObject('save', value);
if($scope.formula == 0) $cookies.putObject ('save', value);
else $scope.formula.push($cookies.putObject('save', value));
}
});
Related
I am trying to make a calculator, simply my problem is this:
Page refreshes.
User clicks on any number and the number gets added to the First Number: nums_clicked h1.
If user clicks on an operator sign(+ - *), the clicked boolean becomes true.
If clicked is true, add the numbers clicked to the Second Number: nums_clicked
My problem is even if I click on an operator sign, it keeps adding the numbers I am clicking to the First Number: nums_clicked h1, why is that happening? It even happens while clicked is TRUE!
My
let numbers = [];
let first_num = "";
let second_num = "";
let clicked = false;
let result = false;
for (var i = 0; i < 9; i++) {
numbers[i] = parseInt(document.querySelectorAll("button")[i].innerText);
}
for (var i = 9; i < 12; i++) {
document.querySelectorAll("button")[i].addEventListener("click", function() {
clicked = true;
});
}
if (!clicked && !result) {
for (let i = 0; i < 9; i++) {
if (clicked) {
break;
}
document.querySelectorAll("button")[i].addEventListener("click",
function() {
console.log("clicked = " + clicked);
first_num += this.innerText;
document.getElementById("firstNumber").innerText = "Number1: " + first_num;
});
}
}
if (clicked && !result) {
for (let i = 0; i < 9; i++) {
document.querySelectorAll("button")[i].addEventListener("click",
function() {
second_num += this.innerText;
document.getElementById("secondNumber").innerText = "Number2: " + second_num;
});
}
}
document.getElementById("result-btn").addEventListener("click",
function() {
result = true;
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title></title>
</head>
<body>
<div class="container">
<button type="button" name="button">1</button>
<button type="button" name="button">2</button>
<button type="button" name="button">3</button>
<br>
<button type="button" name="button">4</button>
<button type="button" name="button">5</button>
<button type="button" name="button">6</button>
<br>
<button type="button" name="button">7</button>
<button type="button" name="button">8</button>
<button type="button" name="button">9</button>
<br>
<br>
<button type="button" name="button">+</button>
<button type="button" name="button">*</button>
<button type="button" name="button">-</button>
<br>
<button id="result-btn" type="button" name="button">Result</button>
<h1 id="firstNumber">First Number: </h1>
<h1 id="secondNumber">Second Number: </h1>
<h1 id="result">Result: </h1>
</div>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
Code:
Screenshot of index.html (Red part while clicked=false and blue part is while clicked=true:
Your main issue was that you were never creating the click events for the second number, because those were behind the if(!result.... Like Barmar mentioned, even if you created the click events for the second number, the events from the first number would be triggered also and it would still not work. Also you did not had anything for setting the actual results.
I made some changes on your code to make it simpler to understand, but still trying to follow your logic. Here you go:
let first_num;
let second_num;
let operation;
for (var i = 9; i < 12; i++) {
document.querySelectorAll('button')[i].addEventListener('click', function () {
operation = this.innerText;
});
}
for (let i = 0; i < 9; i++) {
document.querySelectorAll('button')[i].addEventListener('click', function () {
if (!operation) {
document.getElementById('firstNumber').innerText += this.innerText;
} else {
document.getElementById('secondNumber').innerText += this.innerText;
}
});
}
document.getElementById('result-btn').addEventListener('click', function () {
first_num = document.getElementById('firstNumber').innerText;
second_num = document.getElementById('secondNumber').innerText;
document.getElementById('result').innerText = calculate(
parseInt(first_num),
parseInt(second_num),
operation
);
});
function calculate(a, b, operation) {
if (operation === '+') {
return sum(a, b);
} else if (operation === '-') {
return minus(a, b);
} else if (operation === '*') {
return multiply(a, b);
}
}
function sum(a, b) {
return a + b;
}
function minus(a, b) {
return a - b;
}
function multiply(a, b) {
return a * b;
}
<div class="container">
<button type="button" name="button">1</button>
<button type="button" name="button">2</button>
<button type="button" name="button">3</button>
<br />
<button type="button" name="button">4</button>
<button type="button" name="button">5</button>
<button type="button" name="button">6</button>
<br />
<button type="button" name="button">7</button>
<button type="button" name="button">8</button>
<button type="button" name="button">9</button>
<br />
<br />
<button type="button" name="button">+</button>
<button type="button" name="button">*</button>
<button type="button" name="button">-</button>
<br />
<button id="result-btn" type="button" name="button">Result</button>
<h1>First Number: <span id="firstNumber"></span></h1>
<h1>Second Number: <span id="secondNumber"></span></h1>
<h1>Result: <span id="result"></span></h1>
</div>
Newbie here. I have made a program in which you can type an expression in a text box and click in a button to submit it as an item to an array.I am attempting to make a datalist that has as options the values that are in that array, and
I have tried the solutions provided online, but couldn't make it work. Can you help me?
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button id="clearcustom" type="button">Show Modal</button>
<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>
<button id="submeter" type="button">Submit</button>
<div class="clearpopup">
<div class="clearpopupheader">
<span class="closeclearpopup">×</span>
<p>Choose the option</p>
</div>
<div class="clearpopupcontent">
<form>
<input id="chooseclear" list="chooseclearlist" name="items" />
<datalist id="chooseclearlist"></datalist>
</form>
<button id="clearpopupbutton">Choose</button>
</div>
</div>
<script type="text/javascript">
var TEF = [];
$("#submeter").click(function() {
var newitem = $("#writefrase").val();
if (newitem) {
TEF.push(newitem);
$("#writefrase").val("");
}
});
let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")
modalBtn.onclick = function () {
modal.style.display = "block"
}
closeBtn.onclick = function () {
modal.style.display = "none"
}
</script>
</body>
</html>
You have to create the HTML that goes into your <datalist> with the values from the TEF variable.
Something like this does the trick:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button id="clearcustom" type="button">Show Modal</button>
<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>
<button id="submeter" type="button">Submit</button>
<div class="clearpopup">
<div class="clearpopupheader">
<span class="closeclearpopup">×</span>
<p>Choose the option</p>
</div>
<div class="clearpopupcontent">
<form>
<input id="chooseclear" list="chooseclearlist" name="items" />
<datalist id="chooseclearlist"></datalist>
</form>
<button id="clearpopupbutton">Choose</button>
</div>
</div>
<script type="text/javascript">
var TEF = [];
function redrawDataList(){
let options = [];
TEF.forEach( el => {
options.push(` <option value="${el}">`)
})
$("#chooseclearlist").html(options.join("\n"))
}
$("#submeter").click(function() {
var newitem = $("#writefrase").val();
if (newitem) {
TEF.push(newitem);
$("#writefrase").val("");
}
redrawDataList();
});
let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")
modalBtn.onclick = function () {
modal.style.display = "block"
}
closeBtn.onclick = function () {
modal.style.display = "none"
}
</script>
</body>
</html>
You can use JavaScript Array.prototype.includes() method
var fruits = ["Banana", "Orange", "Apple", "Mango"];
if (fruits.includes("Mango")) {
console.log('Mango');
}
I want to add features to a basic Javascript calculator, but can't get the decimal button to append to the display.
I can get as far as console.logging the product I want, but I can't get the decimal to push to the display. If I used printOutput(output) instead of console.log(output), nothing happens. No error or output.
//GET TEXT VALUES FOR HISTORY AND OUTPUT
function getHistory() {
return document.querySelector(".history-value").innerText;
}
function getOutput() {
return document.querySelector(".output-value").innerText;
}
//PRINT HISTORY AND OUTPUT VALUES TO NUM VALUE
function printHistory(num) {
document.querySelector(".history-value").innerText = num;
}
function printOutput(num) {
if (num == "") {
document.querySelector(".output-value").innerText = num;
} else {
document.querySelector(".output-value").innerText = getFormattedNumber(num);
}
}
//NUMBER FORMATS
function getFormattedNumber(num) {
if (num == "") {
return "";
}
var n = Number(num);
var value = n.toLocaleString("en");
return value;
}
function reverseNumberFormat(num) {
return Number(num.replace(/,/g, ''));
}
//OPERATOR AND NUMBER FUNCTIONS
var operator = document.getElementsByClassName("operator");
for (var i = 0; i < operator.length; i++) {
operator[i].addEventListener('click', function () {
if (this.id == "clear") {
printHistory("");
printOutput("");
}
else if (this.id == "backspace") {
var output = reverseNumberFormat(getOutput()).toString();
if (output) {
output = output.substr(0, output.length - 1);
printOutput(output);
}
}
else {
var output = getOutput();
var history = getHistory();
if (output == "" && history != "") {
output = output == "" ?
output : reverseNumberFormat(output);
if (isNaN(history[history.length - 1])) {
history = history.substr(0, history.length - 1);
}
}
if (output != "" || history != "") {
output = reverseNumberFormat(output);
history = history + output;
if (this.id == "=") {
var result = eval(history);
printOutput(result);
printHistory("");
}
else {
history = history + this.id;
printHistory(history);
printOutput("");
}
}
}
});
}
var number = document.getElementsByClassName("number");
for (var i = 0; i < number.length; i++) {
number[i].addEventListener('click', function () {
var output = reverseNumberFormat(getOutput());
if (this.id == ".") {
output += this.id;
console.log(output);
}
else if (output != NaN) {
output = output + this.id;
printOutput(output);
}
});
}
printOutput("")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<title>calcApp</title>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="results">
<div class="history">
<p class="history-value"></p>
</div>
<div class="output">
<p class="output-value"></p>
</div>
</div>
<div class="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="backspace">CE</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">÷</button>
<button class="number" id="7">7</button>
<button class="number" id="8">8</button>
<button class="number" id="9">9</button>
<button class="operator" id="*">×</button>
<button class="number" id="4">4</button>
<button class="number" id="5">5</button>
<button class="number" id="6">6</button>
<button class="operator" id="-">-</button>
<button class="number" id="1">1</button>
<button class="number" id="2">2</button>
<button class="number" id="3">3</button>
<button class="operator" id="+">+</button>
<button class="empty" id="empty"></button>
<button class="number" id="0">0</button>
<button class="number" id="." data-action="decimal">•</button>
<button class="operator" id="=">=</button>
</div>
</div>
</container>
<script src="script.js"></script>
</body>
</html>
The specific code I attempted is:
var number = document.getElementsByClassName("number");
for (var i = 0; i < number.length; i++) {
number[i].addEventListener('click', function () {
var output = reverseNumberFormat(getOutput());
if (this.id == ".") {
output += this.id;
console.log(output);
}
else if (output != NaN) {
output = output + this.id;
printOutput(output);
}
});
}
In short: I want to create a decimal button that adds a decimal to the existing displayed numbers, and then allows operations using decimals. I'm only asking for help on the display issue.
I'm using Sweet alert for alert messages. I have confirmation alert box is there, after confirmation i have disable my content but that is not disable $scope is not working inside swal() if clicked twice it is working.how can i make it work.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</head>
<body ng-app="app" ng-controller="myController">
Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
<div class="action-keys">
<button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
<button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
</div>
</body>
and my myscript.js:
angular.module('app', [])
.controller('myController', function($scope) {
$scope.disable = false;
$scope.disableCall = function () {
swal(
{
title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
},function(isConfirm) {
if (isConfirm) {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = true;
}else{
return;
}
});
}
$scope.enable = function () {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = false;
}
});
This my sample code enable is working fine, disable function inside confirm not working. Please help on this. Thanks in advance.
Just use $scope.$apply when something happening outside of angular. Notice the call
$scope.$apply(function(){
//everything here will trigger digest cycle
//everything...
});
angular.module('app', [])
.controller('myController', function($scope) {
$scope.disable = false;
$scope.disableCall = function () {
swal(
{
title: 'Warning',text: 'Are you want to disable?',type: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',
confirmButtonText: 'Yes',cancelButtonText: 'No',confirmButtonClass: 'confirm-class',cancelButtonClass: 'cancel-class',allowOutsideClick : false
},function(isConfirm) {
if (isConfirm) {
$scope.$apply(function(){
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = true;
});
}else{
return;
}
});
}
$scope.enable = function () {
$scope.skuID = '';
$scope.seriesID = '';
$scope.supplierID = '';
$scope.disable = false;
}
});
<link rel="stylesheet" href="http://limonte.github.io/sweetalert2/dist/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script type="text/javascript" src="http://limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<div ng-app="app" ng-controller="myController">
Supplier ID:<input type="text" ng-model="supplierID" ng-disabled="disable"/><br>
Series ID:<input type="text" ng-model="seriesID" ng-disabled="disable"/><br>
SKU ID:<input type="text" ng-model="skuID" ng-disabled="disable"/><br><br>
<div class="action-keys">
<button class="btn btn-default" ng-click="enable()" ng-disabled="!disable">Enable</button>
<button class="btn btn-default" ng-click="disableCall()" ng-disabled="disable">Disable</button>
</div>
</div>
I am completely new to the Javascript .When I am looking to get the value to the button its get failed.I already given the setEvent.Like getEle();
And also bind the click function, Now i want to get the input values and perform mathematical calculations.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
<div id="container" >
<div class="calculator">
<ul>
<li>
<div id="display">
<span id="math"></span>
<span id="number"></span>
</div>
</li>
<li>
<button class="input" value="7">7</button>
<button class="input" value="8">8</button>
<button class="input" value="9">9</button>
<button class="control" value="/">÷</button>
<button class="undo" value="-1">←</button>
</li>
<li>
<button class="input" value="4">4</button>
<button class="input" value="5">5</button>
<button class="input" value="6">6</button>
<button class="control" value="*">×</button>
<button class="clear">C</button>
</li>
<li>
<button class="input" value="1">1</button>
<button class="input" value="2">2</button>
<button class="input" value="3">3</button>
<button class="control" value="-">-</button>
<button class="control" value="%">%</button>
</li>
<li>
<button class="input size2" value="0">0</button>
<button class="input" value=".">∙</button>
<button class="control" value="+">+</button>
<button class="submit">=</button>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="calculator.js"></script>
</html>
javascript
function setEvent(evt, ele, callback) {
var ele = getEle(ele);
if (ele.length === undefined) {
ele.addEventListener(evt, callback, false);
} else if(ele.length > 0) {
for (var i=0; i<ele.length; i++) {
ele[i].addEventListener(evt, callback, false);
}
}
return false;
}
function getEle(ele) {
var _idf = ele.charAt(0);
if (_idf == "#") {
var _ele = document.getElementById(ele.substr(1));
return _ele;
} else if(_idf == ".") {
var _els = document.getElementsByClassName(ele.substr(1));
return _els;
}
return ele;
}
setEvent("click", ".input", function() {
console.log(this.value);
});
setEvent("click", ".control", function() {
console.log(this.value);
});
function setEvent(evt, ele, callback) {
var ele = getEle(ele);
if (ele.length === undefined) {
ele.addEventListener(evt, callback, false);
} else if(ele.length > 0) {
for (var i=0; i<ele.length; i++) {
ele[i].addEventListener(evt, callback, false);
}
}
return false;
}
function getEle(ele) {
var _idf = ele.charAt(0);
if (_idf == "#") {
var _ele = document.getElementById(ele.substr(1));
return _ele;
} else if(_idf == ".") {
var _els = document.getElementsByClassName(ele.substr(1));
return _els;
}
return ele;
}
function getInnerHtml(id) {
return document.getElementById(id).innerHTML;
}
function getValue(elem) {
return elem.value;
}
setEvent("click", ".input", function() {
console.log(this.value);
var _num = getInnerHtml("number");
_num = _num + "" + getValue(this);
document.getElementById("number").innerHTML = _num;
});
setEvent("click", ".control", function() {
console.log(this.value);
var _num1 = document.getElementById("number").innerHTML;
_num1 = _num1 + "" + this.value;
document.getElementById("number").innerHTML = _num1;
});
setEvent("click", ".clear", function() {
console.log(this.value);
var _num1 = document.getElementById("number").innerHTML;
_num1 = "";
document.getElementById("number").innerHTML = _num1;
});
setEvent("click", ".submit", function() {
console.log(this.value);
var _num1 = document.getElementById("number").innerHTML;
_num1 = eval( _num1 + "" + getValue(this));
document.getElementById("number").innerHTML = _num1;
});
Hope this will work out.
You can print the values to the screen by using document.getElementById("number").innerHTML = this.value.
Notie that it is not jquery, when calling getElementById you don't do("#id") only ("id"), JavaScript will match the string with the desired Id.
In jquery, it is much like the behavior of css, so in order to find ID you don't do getElementById instead, you just do
//$ means jquery
$("#id")
which is equivalent to java script's getElementById.