I have to following code:
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
</div>
</div>
and
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += allBtns[i].getAttribute("value");
});
}
Im trying to build a calculator in JS and the expected result was putting all the buttons value in the input, but it doesnt seem to work. Any help will be greatly appreciated.
You should be using this to access the current button within your click event:
var allBtns = document.querySelectorAll(".btn");
for (i = 0; i < allBtns.length; i++) {
allBtns[i].addEventListener("click", function() {
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
You should use the this keyword to access the clicked button and then get its value like this:
var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
allBtns[i].addEventListener("click", function(){
document.querySelector(".output").value += this.getAttribute("value");
});
}
<div class="overall">
<div class="calccont">
<input type="text" class="output">
</div>
<div class="buttons">
<button class="btn" type="button" value="1">1</button>
<button class="btn" type="button" value="2">2</button>
<button class="btn" type="button" value="3">3</button>
<button class="btn" type="button" value="4">4</button>
<div>
More about the this keyword:
In most cases, the value of this is determined by how a function is
called. It can't be set by assignment during execution, and it may be
different each time the function is called. ES5 introduced the bind
method to set the value of a function's this regardless of how it's
called, and ECMAScript 2015 introduced arrow functions whose this is
lexically scoped (it is set to the this value of the enclosing
execution context).
On a side note: You are missing a < in the first div tag in the code you have posted, that might also be causing you some issues if that wasn't a copy-paste omission.
Related
Im trying to get my numbers to display the assigned value on screen but I have no clue how to do it.
<div class="container">
<div class="Calaculatorout">
<div class="calculatordisplay">0</div>
<div class="buttons">
<button class="nine">9</button>
<button class="eight">8</button>
<button class="seven">7</button>
<button class="six">6</button>
<button class="five">5</button>
<button class="four">4</button>
<button class="three">3</button>
<button class="two">2</button>
<button class="one">1</button>
<button class="zero">0</button>
<button class="multi">X</button>
<button class="divide">/</button>
<button class="plus">+</button>
<button class="minus">-</button>
<button class="myForm">AC</button>
</div>
</div>
</div>
I need to find a way to assign the values in js or for them to appear on the webpage.
const del = document.querySelector(".back");
const buttons = document.querySelectorAll(".buttons");
const clear = document.querySelector(".clear");
const display = document.querySelector(".calculatordisplay");
buttons.forEach((button) => {
buttons.addEventListener("click", (e) => {
appendNumber(e);
updateDisplay();
});
});
function updateDisplay() {
display.textcontent;
}
Please be more specific with the question and provide all the details.
Anyway, the below code will help you to display the button value on the screen. Also, I added the concatenation logic.
But if you are trying to implement a calculator you need to do an extra bit of logic. Don't forget to handle number/0 or 0/0 scenario 😉
var disp = '';
function myFunction(x) {
disp = disp + x;
if(x == "AC") {
document.getElementById("calculatordisplay").innerHTML = 0;
} else if(disp == "") {
document.getElementById("calculatordisplay").innerHTML = x;
} else {
document.getElementById("calculatordisplay").innerHTML = disp;
}
}
<div class="container">
<div class="Calaculatorout">
<div id="calculatordisplay">0</div>
<div id="buttons">
<button onclick="myFunction(value)" id="nine" value="9">9</button>
<button onclick="myFunction(value)" id="eight" value="8">8</button>
<button onclick="myFunction(value)" id="seven" value="7">7</button>
<button onclick="myFunction(value)" id="six" value="6">6</button>
<button onclick="myFunction(value)" id="five" value="5">5</button>
<button onclick="myFunction(value)" id="four" value="4">4</button>
<button onclick="myFunction(value)" id="three" value="3">3</button>
<button onclick="myFunction(value)" id="two" value="2">2</button>
<button onclick="myFunction(value)" id="one" value="1">1</button>
<button onclick="myFunction(value)" id="zero" value="0">0</button>
<button onclick="myFunction(value)" id="multi" value="X">X</button>
<button onclick="myFunction(value)" id="divide" value="/">/</button>
<button onclick="myFunction(value)" id="plus" value="+">+</button>
<button onclick="myFunction(value)" id="minus" value="-">-</button>
<button onclick="myFunction(value)" id="myForm" value="AC">AC</button>
</div>
</div>
</div>
I have trying to create a calculator using the eval() function. But for some reason my numbers and operator buttons wont show on the screen(form). Below is my html and js code.
const btns = document.querySelectorAll('.btn');
var screenView = document.querySelector('.screen');
const equalBtn = document.querySelector('.btn-equal');
const clearBtn = document.querySelector('.btn-clear');
for (let i = 0; i < btns.lenght; i++) {
btns[i].addEventListener('click', function() {
let number = btns[i].getAttribute('data-num');
screenView.value += number;
})
}
equalBtn.addEventListener('click', function() {
let value = eval(screenView.value);
screenView.value = value;
})
clearBtn.addEventListener('click', function() {
screenView.value = '';
})
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<button type="button" class="btn btn-digits" data-num="7">7</button>
<button type="button" class="btn btn-digits" data-num="8">8</button>
<button type="button" class="btn btn-digits" data-num="9">9</button>
<button type="button" class="btn btn-operators" data-num="/">/</button>
<button type="button" class="btn btn-digits" data-num="4">4</button>
<button type="button" class="btn btn-digits" data-num="5">5</button>
<button type="button" class="btn btn-digits" data-num="6">6</button>
<button type="button" class="btn btn-operators" data-num="*">*</button>
<button type="button" class="btn btn-digits" data-num="1">1</button>
<button type="button" class="btn btn-digits" data-num="2">2</button>
<button type="button" class="btn btn-digits" data-num="3">3</button>
<button type="button" class="btn btn-operators" data-num="-">-</button>
<button type="button" class="btn btn-digits" data-num=".">.</button>
<button type="button" class="btn btn-digits" data-num="0">0</button>
<button type="button" class="btn-clear btn-digits">C</button>
<button type="button" class="btn btn-operators" data-num="+">+</button>
<button type="button" class="btn-equal btn-digits">=</button>
</div>
</section>
You have a typo there: lenght instead of length.
Also, I feel obliged to say, that eval() should always be considered after everything
else failed, as the last resort.
I have some buttongroups like this:
<div class="btn-group" id="RPPP">
<button type="button" class="btn" name="PPP" value="1">1</button>
<button type="button" class="btn" name="PPP" value="2">2</button>
<button type="button" class="btn" name="PPP" value="3">3</button>
<button type="button" class="btn" name="PPP" value="4">4</button>
<button type="button" class="btn" name="PPP" value="5">5</button>
</div>
...and at the bottom an "Analyse" button.
<a href="#last" id="secnext" class=" btn-lg btn-info " >Analyse</a>
they look like this
In the eventlistener function i'd like to push the selected button's name and value into an multidimensional array.
var myBtnn = document.getElementById('secnext');
myBtnn.addEventListener('click', function(event) {
var array =[];
//store buttons name and value both in an array
}
So that I'll have them like:
[PPP][4]
[TTT][3]
[DDD][5]
Take a look at this sample code.
You need Array#reduce and forin to achieve what you want.
Note that I am selecting all the buttons with this call:
Also, note that I have put all buttons in one group, but I hope you get the idea.
var coll = document.querySelectorAll('button');
So, depending on your html you may want to change the html to select the buttons.
var myBtnn = document.getElementById('secnext');
myBtnn.addEventListener('click', function (event) {
var array = [];
var coll = document.querySelectorAll('button');
//store buttons name and value both in an array
var collArr = [].slice.call(coll);
var ans = [];
var obj = collArr.reduce(function (obj, btn) {
if (!obj[btn.name]) {
obj[btn.name] = 0;
}
obj[btn.name]++;
return obj;
}, {});
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
ans.push([i, obj[i]]);
}
}
console.log(ans);
});
<div class="btn-group" id="RPPP">
<button type="button" class="btn" name="PPP" value="1">1</button>
<button type="button" class="btn" name="PPP" value="2">2</button>
<button type="button" class="btn" name="PPP" value="3">3</button>
<button type="button" class="btn" name="PPP" value="4">4</button>
<button type="button" class="btn" name="TTT" value="1">1</button>
<button type="button" class="btn" name="TTT" value="2">2</button>
<button type="button" class="btn" name="TTT" value="3">3</button>
<button type="button" class="btn" name="DDD" value="4">4</button>
<button type="button" class="btn" name="DDD" value="5">5</button>
<button type="button" class="btn" name="DDD" value="4">6</button>
<button type="button" class="btn" name="DDD" value="5">7</button>
<button type="button" class="btn" name="DDD" value="5">8</button>
</div>
Analyse
You should use objects instead of arrays.
So if you have an object like PPP you can put an array inside the object.
Example:
var obj = {
'PPP' : ['1', '2'],
'TTT' : ['1', '2']
};
obj.PPP[0] == '1';
obj.PPP[1] == '2';
obj.TTT[0] == '1';
obj.TTT[1] == '2';
I have a list of bootstrap buttons and also a search box and I want to implement a filter function(preferably in javascript) to filter the number of buttons:
The bootstrap code is here:
https://jsfiddle.net/7zyrdnab/
<div class="row">
<div class="col-lg-2">
<div class="panel">
<input type="text" id="search" placeholder="Type to search">
<br>
<button type="button" class="btn btn-secondary">AA1009</button>
<button type="button" class="btn btn-secondary">AA1010</button>
<button type="button" class="btn btn-secondary">BA1098</button>
<button type="button" class="btn btn-secondary">BB1890</button>
<button type="button" class="btn btn-secondary">C89761</button>
<button type="button" class="btn btn-secondary">CD1667</button>
<button type="button" class="btn btn-secondary">GG7830</button>
<button type="button" class="btn btn-secondary">GF65372</button>
<button type="button" class="btn btn-secondary">BH6537</button>
<button type="button" class="btn btn-secondary">HGB562</button>
<button type="button" class="btn btn-secondary">LK9063</button>
<button type="button" class="btn btn-secondary">CP9871</button>
<button type="button" class="btn btn-secondary">IRON87</button>
<button type="button" class="btn btn-secondary">ACT567</button>
<button type="button" class="btn btn-secondary">MPO760</button>
<button type="button" class="btn btn-secondary">GH5436</button>
<button type="button" class="btn btn-secondary">NBH894</button>
<button type="button" class="btn btn-secondary">GHFDF6</button>
<button type="button" class="btn btn-secondary">US4536</button>
<button type="button" class="btn btn-secondary">MO9854</button>
</div>
</div>
</div>
The filter should work like this:
if AA is typed, only the buttons with the text "aa" should be visible.
The only suggestion i got while searching online was use list.js but I was wondering if there can be a simpler javascript search implementation.
https://jsfiddle.net/Shuaso/qhku76bu/
The jquery:
var $button = $('.btn');
$('#search').keyup(function() {
var re = new RegExp($(this).val(), "i"); // case-insensitive
$button.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
Basically you want to run the function each time the user types in the input to filter the elements. You are hiding all buttons that do not match the user input.
Suppose I have 2 areas separated by div containers, I need to send the Id values from the different areas, locally when the function is called in that container.
extract:
<script>
document.getElementById('compare_name").innerHTML = "Changed";
</script>
<div class = "details>
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
You cannot use same ID for more than one element. you can use name instead like below:
<script>
var x = document.getElementsByName("compare_name");
for(var i = 0; i < x.length ; i++){
x[i].innerHTML = "Changed";
}
</script>
<div class = "details>
<span id="compare_name" name="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name" name="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
As others indicates that, to follow the rule, the ID attribute should not be duplicated, but it doesn't matter if you don't rely on it.
I guess the asker might only need to change one text inside the div which is clicked, not all the spans, so just a little change.
<html>
<head>
<title>Test</title>
<script>
function add_compare(el) {
var divChildEles = el.parentNode.parentNode.childNodes;
for (var i=0; i<divChildEles.length; i++) {
if (divChildEles[i].nodeType==1 && divChildEles[i].nodeName=="SPAN") {
//console.log(divChildEles[i].innerText);
divChildEles[i].innerText='changed';
}
}
}
</script>
</head>
<body>
<div class = "details">
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details1">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
</body>
</html>
id in JavaScript must be unique. instead, you can give them a class with the same name
<script>
var x=document.getElementByClassName('compare_name");
for(var i=0;i<x.lengh;i++)
x[i].innerHTML = "Changed"
</script>
<div class = "details>
<span class="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span class="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>