Menu
When user type wrong input than the custom error will generate and show error (you have typed wrong input)..I have create default error but not custom error.I need. I need custom error.Anyone help me
var Scrn = document.querySelector('#screen');
var maibox = document.querySelector('.calBox');
var exp = '';
var errro_btn = document.querySelector('#error_screen');
var close = document.querySelector('#close')
maibox.addEventListener('click', (e) => {
let vlu = e.target.value;
if (vlu) {
if (vlu != 'undefined') {
if (vlu == '=') {
try {
exp = eval(exp)
Scrn.innerHTML = exp
} catch (error) {
errro_btn.innerHTML += error.message
errro_btn.style.display = "block"
}
} else if (vlu == 'ac') {
Scrn.innerHTML = '0'
exp = ''
} else if (vlu == 'OFF') {
Scrn.innerHTML = ''
exp = ''
} else if (vlu == 'undefined') {
exp = '='
Scrn.innerHTML = '0'
} else if (vlu == '√') {
exp = Math.sqrt(exp)
Scrn.innerHTML += vlu
} else if (vlu == '^') {
exp = Math.pow(exp)
Scrn.innerHTML = vlu
} else if (vlu == 'sin') {
exp = Math.sin(exp)
Scrn.innerHTML = vlu
} else if (vlu == 'cos') {
exp = Math.cos(exp)
Scrn.innerHTML = vlu
} else if (vlu == 'tan') {
exp = Math.tan(exp)
Scrn.innerHTML = vlu
} else {
exp += vlu
Scrn.innerHTML = exp
}
}
}
})
errro_btn.addEventListener('click', (e) => {
if (e.target.id === "close") {
errro_btn.style.display = "none";
}
}).calBox{
position: relative;
width: 400px;
padding: 20px;
margin: 100px auto;
background-image: linear-gradient(135deg, #767676,#767676,#767676, #aaa);
border: 1px solid #aaa;
box-shadow: 0 0 3px 4px #8e8888 ;
}
span{
position: relative;
display: block;
width: 380px;
height: 38px;
padding: 5px 10px;
background: #bdcbbd;
margin-bottom: 30px;
margin-top: 4px;
font-size: 34px;
}
#error_screen{
position: relative;
display: none;
width: 380px;
height: 34px;
color: #D8000C;
padding: 5px 10px;
background: #FFBABA;
margin-bottom: 10px;
margin-top: 0px;
font-size: 16px;
}
#close{
padding:1px 5px 4px;
font-size: 15px;
box-shadow: none;
color: #ffbaba;
float: right;
border: none;
margin: 0;
border-radius: 50%;
background: #D8000C;
}
#close:focus{
outline: none;
}
.buttons{
margin-top: 40px;
}
#ac{
background: #4D8C50;
float: right;
padding: 10px 18px !important;
}
#oFF{
padding: 10px 12px !important;
background: #4D8C50;
}
#ans{
background: #4D8C50;
}
button{
padding: 10px 22px;
margin: 10px;
font-size: 20px;
box-shadow: 0 0 8px 2px #9c9a9a;
background: #454545;
color: #fff;
border: none;
border-radius: 6px;
}<div class="calBox">
<span id="screen">0</span>
<span id="error_screen">
<button id="close">x</button>
</span>
<hr>
<button id="7" value='7'>7</button>
<button id="8" value='8'>8</button>
<button id="9" value='9'>9</button>
<button id="ac" value='ac'>ac</button>
<button id="oFF" value='OFF'>OFF</button>
<button id="4" value='4'>4</button>
<button id="5" value='5'>5</button>
<button id="6" value='6'>6</button>
<button id="del" value='del'>del</button>
<button id="1" value='1'>1</button>
<button id="2" value='2'>2</button>
<button id="3" value='3'>3</button>
<button id="+" value='+'>+</button>
<button id="/" value='/'>/</button>
<button id="0" value='0'>0</button>
<button id="*" value='*'>x</button>
<button id="." value='.'>.</button>
<button id="-" value='-'>-</button>
<button id="√" value='√'>√</button>
<button id="sin" value='sin'>sin</button>
<button id="cos" value='cos'>cos</button>
<button id="tan" value='tan'>tan</button>
<button id="ans" value='='>=</button>
</div>
285
Your current code is:
errro_btn.innerHTML+= error.message
Change this to:
errro_btn.innerHTML+= "Your custom error message here"
Below is working code snippet:
var Scrn =document.querySelector('#screen');
var maibox = document.querySelector('.calBox');
var exp = '';
var errro_btn = document.querySelector('#error_screen');
var close = document.querySelector('#close')
maibox.addEventListener('click',(e)=>{
let vlu = e.target.value;
if (vlu) {
if (vlu != 'undefined'){
if (vlu == '=') {
try{
exp=eval(exp)
Scrn.innerHTML=exp
}
catch(error){
errro_btn.innerHTML+= "Your custom error message"
errro_btn.style.display="block"
}
}
else if(vlu=='ac'){
Scrn.innerHTML='0'
exp=''
}
else if(vlu=='OFF'){
Scrn.innerHTML=''
exp=''
}
else if (vlu=='undefined'){
exp='='
Scrn.innerHTML='0'
}
else if(vlu=='√'){
exp=Math.sqrt(exp)
Scrn.innerHTML+=vlu
}
else if(vlu=='^'){
exp=Math.pow(exp)
Scrn.innerHTML=vlu
}
else if(vlu=='sin'){
exp=Math.sin(exp)
Scrn.innerHTML=vlu
}
else if(vlu=='cos'){
exp=Math.cos(exp)
Scrn.innerHTML=vlu
}
else if(vlu=='tan'){
exp=Math.tan(exp)
Scrn.innerHTML=vlu
}
else{
exp+=vlu
Scrn.innerHTML=exp
}
}
}
})
errro_btn.addEventListener('click', (e)=>{
if (e.target.id=== "close") {
errro_btn.style.display = "none";
}
}).calBox{
position: relative;
width: 400px;
padding: 20px;
margin: 100px auto;
background-image: linear-gradient(135deg, #767676,#767676,#767676, #aaa);
border: 1px solid #aaa;
box-shadow: 0 0 3px 4px #8e8888 ;
}
span{
position: relative;
display: block;
width: 380px;
height: 38px;
padding: 5px 10px;
background: #bdcbbd;
margin-bottom: 30px;
margin-top: 4px;
font-size: 34px;
}
#error_screen{
position: relative;
display: none;
width: 380px;
height: 34px;
color: #D8000C;
padding: 5px 10px;
background: #FFBABA;
margin-bottom: 10px;
margin-top: 0px;
font-size: 16px;
}
#close{
padding:1px 5px 4px;
font-size: 15px;
box-shadow: none;
color: #ffbaba;
float: right;
border: none;
margin: 0;
border-radius: 50%;
background: #D8000C;
}
#close:focus{
outline: none;
}
.buttons{
margin-top: 40px;
}
#ac{
background: #4D8C50;
float: right;
padding: 10px 18px !important;
}
#oFF{
padding: 10px 12px !important;
background: #4D8C50;
}
#ans{
background: #4D8C50;
}
button{
padding: 10px 22px;
margin: 10px;
font-size: 20px;
box-shadow: 0 0 8px 2px #9c9a9a;
background: #454545;
color: #fff;
border: none;
border-radius: 6px;
}<!DOCTYPE html>
<html>
<head>
<title>calculator</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="calBox">
<span id="screen">0</span>
<span id="error_screen">
<button id="close">x</button>
</span>
<hr>
<button id="7" value='7'>7</button>
<button id="8" value='8'>8</button>
<button id="9" value='9'>9</button>
<button id="ac" value='ac'>ac</button>
<button id="oFF" value='OFF'>OFF</button>
<button id="4" value='4'>4</button>
<button id="5" value='5'>5</button>
<button id="6" value='6'>6</button>
<button id="del" value='del'>del</button>
<button id="1" value='1'>1</button>
<button id="2" value='2'>2</button>
<button id="3" value='3'>3</button>
<button id="+" value='+'>+</button>
<button id="/" value='/'>/</button>
<button id="0" value='0'>0</button>
<button id="*" value='*'>x</button>
<button id="." value='.'>.</button>
<button id="-" value='-'>-</button>
<button id="√" value='√'>√</button>
<button id="sin" value='sin'>sin</button>
<button id="cos" value='cos'>cos</button>
<button id="tan" value='tan'>tan</button>
<button id="ans" value='='>=</button>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
