CODEWITHSUNDEEP
javascript
Sumanth CVSS
Sumanth CVSS

Reputation: 13

Uncaught SyntaxError: Invalid or unexpected token at HTMLButtonElement.<anonymous>

i have been working on this code and i am facing an anonymously error and i am new to javascript... please help me out i have attached the photos for more information and code too

my code:

(function () {
    
let screen=document.querySelector('.screen');
let buttons=document.querySelectorAll('.btn');
let clear=document.querySelector('.btn-clear');
let equal=document.querySelector('.btn-equal');

buttons.forEach(function(button){
    button.addEventListener('click',function(n){
        let value=n.target.dataset.num;
        screen.value += value;
    })
});

equal.addEventListener('click',function(e){
    if(screen.value === ''){
        screen.value = "";
    }else{
        let answer = eval(screen.value);
        screen.value = answer;
    }
})

clear.addEventListener('click',function(e){
    screen.value=""
});


})();













// (function () {

//     let screen = document.querySelector('.screen');
//     let buttons = document.querySelectorAll('.btn');
//     let clear = document.querySelector('.btn-clear');
//     let equal = document.querySelector('.btn-equal');




//     buttons.forEach(function (button) {
//         button.addEventListener('click', function (e) {
//             let value = e.target.dataset.num;
//             screen.value += value;
//         })
//     });

//     equal.addEventListener('click', function (e) {
//         if (screen.value == '') {
//             screen.value = "";
//         } else {
//             let answer = eval(screen.value)|Number
//             screen.value = answer;

//         }
//     });



// })();
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1{
padding-right:10%; ;
}
body {
    min-height: 100vh;
    background: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    width: 300px;
    height: 500px;
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    background: #22252D;
    overflow: hidden;
}


form input {
    width: 100%;
    height: 150px;
    border: none;
    border-radius: 12px;
    font-size: 2rem;
    padding: 1rem;
    color: #fff;
    background: #000;
    text-align: right;
    pointer-events: none;


}

.buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}


button{
    flex: 0 0 22%;
    margin: 5px 0;
border: 1px solid #000;
    width: 60px;
    height: 52px;
    font-size: 22px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;   
}

.btn-yellow{
    background: rgb(245,146,62);
color: #fff;
}

.btn-grey{
    background: rgb(228, 222, 222);
}

.btn-clear{
    background: rgb(255, 0, 0);
    margin-left: 78%;
}

.btn-equal{
  
    background: rgb(0, 234, 255);
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>My Calculator
     <br>
    <hr>
    Designed by Sumanth
</h1>
    <section class="calculator">
        <form>
            <input type="text" class="screen">
        </form>

        <div class="buttons">
            <button type="button" class="btn btn-yellow" data-num="*">*</button>
            <button type="button" class="btn btn-yellow" data-num="/">/</button>
            <button type="button" class="btn btn-yellow" data-num="-">-</button>
            <button type="button" class="btn btn-yellow" data-num="+">+</button>


            <button type="button" class="btn btn-grey" data-num="9">9</button>
            <button type="button" class="btn btn-grey" data-num="8">8</button>
            <button type="button" class="btn btn-grey" data-num="7">7</button>
            <button type="button" class="btn btn-grey" data-num="6">6</button>
            <button type="button" class="btn btn-grey" data-num="5">5</button>
            <button type="button" class="btn btn-grey" data-num="4">4</button>
            <button type="button" class="btn btn-grey" data-num="3">3</button>
            <button type="button" class="btn btn-grey" data-num="2">2</button>
            <button type="button" class="btn btn-grey" data-num="1">1</button>
            <button type="button" class="btn btn-grey" data-num="0">0</button>
            <button type="button" class="btn btn-grey" data-num=".">.</button>


            <button type="button" class="btn btn-equal" >=</button>
            <button type="button" class="btn btn-clear">C</button>








        </div>

    </section>










    <script src="app.js"></script>
</body>

</html>

i have been working on this code and i am facing an anonymously error and i am new to javascript... please help me out i have attached the photos for more information and code too

my code:

(function () {
    
let screen=document.querySelector('.screen');
let buttons=document.querySelectorAll('.btn');
let clear=document.querySelector('.btn-clear');
let equal=document.querySelector('.btn-equal');

buttons.forEach(function(button){
    button.addEventListener('click',function(n){
        let value=n.target.dataset.num;
        screen.value += value;
    })
});

equal.addEventListener('click',function(e){
    if(screen.value === ''){
        screen.value = "";
    }else{
        let answer = eval(screen.value);
        screen.value = answer;
    }
})

})();

output:

Uncaught SyntaxError: Invalid or unexpected token
    at HTMLButtonElement.<anonymous>

code image error

Please help me out... thanks in advance

(function () {
    
let screen=document.querySelector('.screen');
let buttons=document.querySelectorAll('.btn');
let clear=document.querySelector('.btn-clear');
let equal=document.querySelector('.btn-equal');

buttons.forEach(function(button){
    button.addEventListener('click',function(n){
        let value=n.target.dataset.num;
        screen.value += value;
    })
});

equal.addEventListener('click',function(e){
    if(screen.value === ``){   //i changed here '' this to -> `` this 
        screen.value = "";   // even though same error is occuring
    }else{
        let answer = eval(screen.value);
        screen.value = answer;
    }
})

})();

Please help me out... thanks in advance

Upvotes: 1

Views: 734

Answers (1)

Ravi Gora
Ravi Gora

Reputation: 36

  1. AddEvent.target.innerHTML Should be added.
  2. And ID's needs to be updated to get rid of the undefined error.

I have solved this in the following : Please check the attributes in HTML code and the events in functions conditions.

var buttons = document.querySelectorAll(".btn");
var screen = document.querySelector(".screen");


buttons.forEach(function(button){
  button.addEventListener('click', function(event){
    if(event.target.innerHTML == "C"){
      return screen.value = "";
    } else if (event.target.innerHTML == "=") {
      return;
    }
    let view = event.target.dataset.num;
    screen.value += view;
  });
});

var equalButton = document.querySelector("#equals")
equalButton.addEventListener('click', function(event){
  if(screen.value == ""){
    return alert("Please Enter a Value");
  }
  screen.value = screen.value + "=" + eval(screen.value);
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1{
padding-right:10%;
}
body {
    min-height: 100vh;
    background: whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calculator {
    width: 300px;
    height: 500px;
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    background: #22252D;
    overflow: hidden;
}


form input {
    width: 100%;
    height: 150px;
    border: none;
    border-radius: 12px;
    font-size: 2rem;
    padding: 1rem;
    color: #fff;
    background: #000;
    text-align: right;
    pointer-events: none;


}

.buttons{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}


button{
    flex: 0 0 22%;
    margin: 5px 0;
border: 1px solid #000;
    width: 60px;
    height: 52px;
    font-size: 22px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;   
}

.btn-yellow{
    background: rgb(245,146,62);
color: #fff;
}

.btn-grey{
    background: rgb(228, 222, 222);
}

.btn-clear{
    background: rgb(255, 0, 0);
    margin-left: 78%;
}

.btn-equal{
  
    background: rgb(0, 234, 255);
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>My Calculator
     <br>
    <hr>
    Designed by Your name
</h1>
    <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> Calculator 8 </title>
 <script src="fp.js" defer></script>
 <link rel="stylesheet" href="fp.css">



</head>

<body>
 <section class="calculator">

  <form>
   <input type="text" name="calcScreeng" id="numberBox" class="screen">
  </form>
  <div class="buttons"> 
   <!-- operation buttons -->
   <button id="multiply" type="button" class="btn btn-yellow" data-num="*">*</button>
   <button id="divide" type="button" class="btn btn-yellow" data-num="/">/</button>
   <button id="subtract" type="button" class="btn btn-yellow" data-num="-">-</button>
   <button id="add" type="button" class="btn btn-yellow" data-num="+">+</button>
   <!-- number buttons -->
  <button id="decimal" type="button" class="btn btn-grey" data-num=".">.</button>
   <button id="number9" type="button" class="btn btn-grey" data-num="9">9</button>
   <button id="number8" type="button" class="btn btn-grey" data-num="8">8</button>
   <button id="number7" type="button" class="btn btn-grey" data-num="7">7</button>
   <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
   <button id="number5" type="button" class="btn btn-grey" data-num="5">5</button>
   <button id="number4" type="button" class="btn btn-grey" data-num="4">4</button>
   <button id="number3" type="button" class="btn btn-grey" data-num="3">3</button>
   <button id="number2" type="button" class="btn btn-grey" data-num="2">2</button>
   <button id="number1" type="button" class="btn btn-grey" data-num="1">1</button>
   <button id="number0" type="button" class="btn btn-grey" data-num="0">0</button>
         
   <button id="equals" type="button" class="btn btn-equal">=</button>
   <button id="clear" type="button" class="btn btn-clear">C</button>


  </div>



 </section>

 











    <script src="app.js"></script>
</body>

</html>

Upvotes: 1

Related Questions