[Web] Invalid left-hand side in assignment 에러

 

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

document.getElementById('tag1').style.white-space = save6;

Javascript에서 위와 같은 코드를 작성하면 아래와 같은 에러가 납니다.

Uncaught SyntaxError: Invalid left-hand side in assignment

 

---

2. Why? (원인)

• "-webkit-animation " 혹은 "white-space" 속성 등은 CSS에서 정의한 속성이므로, 다른 방법을 활용해 사용할 수 있습니다.

---

3. How? (해결책)

• Method1. Javascript에서 수정된 언어로 사용할 수 있습니다.
• Method2. setAttribute()함수내 "style"을 활용해 셋팅할 수 있습니다.
• Method3. ['']를 활용해 할당할 수 있습니다.

# Method1
document.getElementById('tktag0').style.whiteSpace = save6;
document.getElementById('tktag0').style.webkitAnimationName = 'colorchange';

# Method2
document.getElementById('circle1').setAttribute("style", "-webkit-animation: upDown 15s infinite");

# Method3
document.getElementById('circle1').style['-webkit-animation'] = 'upDown 15s infinite';

 

---