Project works in CodePen but not on Mobile or other Browsers

JavaScript
#1

Hi all,

I am working on the calculator project in the Front End Libraries Projects. I have successfully completed the project on CodePen.

The problem : If I try to open the project on any browser other than Firefox or if I try to open it on a mobile device, the buttons no longer respond to being clicked.

Any advice for why this is happening or how to fix it will be appreciated. Thank you!

Your code so far
The project was created with React JS. It can be found here: https://codepen.io/kapigeau/pen/QWjvXoZ

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0.

Challenge: Build a JavaScript Calculator

Link to the challenge:

#2

Hey @kapigeau. I had a quick look over your code and I found this lines:

handleClick(e){
    document.getElementById(event.target.id).animate([{backgroundColor: "#d9990b"}, {color: "black"}, {transform: "translate(2px, 2px)"}, {top: "3px"}], 200) 
    
    let current = e.target.innerText;

I doesn’t make sense to me using document.getElementById method to grab the event source when right below that line you’re doing the same:

let current = e.target.innerText;

So I commented out the first line //document.getElementById and tested your project accross various browsers. Apparently that was your problem.

1 Like
#3

Thanks for your help! Removing this line does make the rest of the code work properly. However, I am not sure why the animations specified in this line work in Firefox but not on any other browser/device.

#4