Develop Reference

Is the eval() function the ideal approach to carry out calculations?

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.

one search input multiple names

So I am working on a website where you have one search bar and you can search with multiple websites like google, amazon, youtube and some more. My problem is, that all this is in one form and I can't use the name="q" which is working on the most search api's on amazon and wikipedia, because there are the names k (amazon) and search (wikipedia). Does anyone know how to change the name f the input for two buttons?
Here's the link: https://multi-search.bss.design/
<form target="_blank">
<input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>

You could simply store a data- attribute on each button representing the corresponding name attribute (defaulting to q) and change it dynamically upon click.
e.g. :
<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
submitButton.addEventListener('click', function(e) {
document.querySelector('[data-input-search]').setAttribute('name',
this.getAttribute('data-search-input-name') || 'q');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-search class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span>Google</button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span>YouTube</button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span>Translate</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span>Images</button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span>Netflix</button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>
Note: only Wikipedia button works here as Google/Amazon block that from an iframe, but you can test Wikipedia.

You can for example:
1. Add hidden fields
<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">
and synchronize then using JS code:
const updateHiddenFields = (evt) => {
document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value
};
2. Rename field when button is clicked:
document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');
(Add id="button-amazon" to the Amazon button to make this working.)

Codes not allowing proper arithmetic operation on javascript calculator

My current codes are not allowing me to properly display the operators. At this time I am not able to display an operator after an initial calculation. For example, if I do this '9+2' then press '='. I will get a result but if I press an operator like '*' the display will only show the operator without the number. Looking at my current code what am I missing? Please advise.
$(document).ready(function() {
var shouldbeClear = false;
//create variable to store input from user to calculate later
var inputs = [''];
//create string to store current input string
var totalString;
//create operators array for validation without the .
var operators1 = ['+', '-', '*', '/'];
var operators2 = ['.'];
//numbers for validation
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getValue(value) {
if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') {
alert('STOP & RESTART!!!');
} else if (inputs.length === 1 && operators1.includes(value) === false) {
inputs.push(value);
} else if (operators1.includes(inputs[inputs.length - 1]) === false) {
inputs.push(value);
} else if (nums.includes(Number(value))) {
inputs.push(value);
}
update();
}
function update() {
totalString = inputs.join('');
$('#display').html(totalString);
}
function getTotal() {
shouldbeClear = true;
totalString = inputs.join('');
$('#display').html(eval(totalString));
var result = document.getElementById("display").innerHTML;
inputs = [];
inputs[0] = '';
for (var i = 0; i <= result.length - 1; i++) {
inputs[i + 1] = result[i];
}
update();
}
$('button').on('click', function() {
if (this.id === 'deleteAll') {
inputs = ['0'];
update();
} else if (this.id === 'backSpace') {
inputs.pop();
update();
} else if (this.id === 'total') {
getTotal();
} else {
if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) {
if (shouldBeCleared){
shouldBeCleared = false;
inputs=[''];
update();
getValue(this.id);
} else {
getValue(this.id);
}
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="calcOutput">
<span id="display">Enter Some Number...</span>
<hr>
</div>
<div class="text-center" id="calculator">
<button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
<button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
<button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
</div>
</div>

Add a variable which will inform the calculator whether it should clear everything.
I called the variable shouldBeCleared
Each time you click on = shouldBeCleared is set to true.
Then if you click on any NUMBER, check if shouldBeCleared is set to true, clear your inputs array and update().
As follows:
$(document).ready(function() {
var shouldBeCleared = false;
//create variable to store input from user to calculate later
var inputs = [''];
//create string to store current input string
var totalString;
//create operators array for validation without the .
var operators1 = ['+', '-', '*', '/'];
var operators2 = ['.'];
//numbers for validation
var nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
function getValue(value) {
if (operators2.includes(inputs[inputs.length - 1]) === true && value === '.') {
alert('STOP & RESTART!!!');
} else if (inputs.length === 1 && operators1.includes(value) === false) {
inputs.push(value);
} else if (operators1.includes(inputs[inputs.length - 1]) === false) {
inputs.push(value);
} else if (nums.includes(Number(value))) {
inputs.push(value);
}
update();
}
function update() {
totalString = inputs.join('');
$('#display').html(totalString);
}
function getTotal() {
shouldBeCleared = true;
totalString = inputs.join('');
$('#display').html(eval(totalString));
var result = document.getElementById("display").innerHTML;
inputs = [];
inputs[0] = '';
for (var i = 0; i <= result.length - 1; i++) {
inputs[i + 1] = result[i];
}
update();
}
$('button').on('click', function() {
if (this.id === 'deleteAll') {
inputs = ['0'];
update();
} else if (this.id === 'backSpace') {
inputs.pop();
update();
} else if (this.id === 'total') {
getTotal();
} else {
if (inputs[inputs.length - 1].indexOf('+', '-', '/', '*', '.') === -1) {
if (shouldBeCleared){
shouldBeCleared = false;
inputs=[''];
update();
}
getValue(this.id);
} else {
getValue(this.id);
}
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="calcOutput">
<span id="display">Enter Some Number...</span>
<hr>
</div>
<div class="text-center" id="calculator">
<button type="button" class="btn btn-danger btn-lg btn3d" id="deleteAll">AC</button>
<button type="button" class="btn btn-warning btn-lg btn3d" id="backSpace">CE</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="/">/</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="*">*</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="7">7</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="8">8</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="9">9</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="-">-</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="4">4</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="5">5</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="6">6</button>
<button type="button" class="btn btn-success btn-lg btn3d" id="+">+</button><br>
<button type="button" class="btn btn-primary btn-lg btn3d" id="1">1</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="2">2</button>
<button type="button" class="btn btn-primary btn-lg btn3d" id="3">3</button>
<button type="button" class="btn btn-success btn-lg btn3d" id=".">.</button><br>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="0">0</button>
<button type="button" class="btn btn-info btn-lg btn3d bigButton" id="total">=</button><br>
</div>
</div>

FIlter a list of bootstrap buttons

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.

Trying to make a virtual keypad in Bootstrap using JS

There's a simple textbox with a virtual keypad that toggles in and out as the user clicks the keyboard icon inside of the text box:
each letter is a clickable button and the idea is to populate the text box with the value of the button being clicked. Here's what I've done:
HTML
<div class="input-group col-md-4 col-md-offset-4">
<input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
<span class="fa fa-keyboard-o fa-2x lookup-icon"></span>
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>
<div id="virtualkeypad" class="col-md-offset-4 hidden">
<button id="key" class="btn btn-lg special-char-btn first-btn" type="button">á</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">é</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">í</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ó</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ú</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ü</button>
<button id="key" class="btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>
JS
function toggler(divId) {
$("#" + divId).toggleClass("hidden show");
}
$(function(){
var $write = $('#word');
$('#key').click(function(){
var $this = $(this),
character = $this.html();
$write.html($write.html() + character);
});
});
However, I must be doing something very wrong because the above code doesn't seem to do anything. Could someone please help me fix it?
Update: As advised by sandeep s in his answer below, I removed the key ID from the buttons and added a new class spl-key instead. The HTML now looks like this:
<div class="input-group col-md-4 col-md-offset-4">
<input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
<span class="fa fa-keyboard-o fa-2x lookup-icon"></span>
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>
<div id="virtualkeypad" class="col-md-offset-4 hidden">
<button class="spl-key btn btn-lg special-char-btn first-btn" type="button">á</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">é</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">í</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ó</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ú</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ü</button>
<button class="spl-key btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>
And I also changed the script as advised to:
function toggler(divId) {
$("#" + divId).toggleClass("hidden show");
}
$(function(){
$('.spl-key').click(function(e){
$(e.target).toggleClass("hidden");
character = $(e.target).text();
$('#word').val(character);
});
});
The problem, however, persists and button clicks are still unresponsive as before.

This should be your implementation:
$(function(){
$('.btn-lg').click(function(e){
$(e.target).toggleClass("hidden");
character = $(e.target).text();
$('#word').val(character);
});
});