간단한 배경 변경이 작동하지 않습니다.

Question

이 두 기능이 올바르게 작동하지 않는 이유를 이해하려고합니다. 버튼 1을 클릭하면 배경 스타일이 파란색으로 바뀌고 버튼 2는 클래스 이름이 바뀌기를 원합니다. 그러나 나는 그것을 바이올린에서 시연되는 방법으로하고 싶습니다.

누군가 작동하지 않는 이유를 설명 할 수 있습니까? 나는 새로운 직업에 있었고 가능한 구문 오류가있는 간단한 수정이라고 생각하여 왜 작동하지 않는지 배우고 싶습니다. 어떤 설명

var el = document.getElementByClassName('test'); 
 

 
function taskOne() { 
 
    alert('task 1 executed successfully'); 
 
    el.style.background="blue !important"; 
 
} 
 

 
function taskTwo() { 
 
    alert('task 2 executed successfully'); 
 
    el.className += " test-2"; 
 
}

.test { 
 
    background: lightgreen; 
 
} 
 

 
.test-2 { 
 
    background: orange !important; 
 
}

<div class="test">content</div> 
 
<div class="test">content 2</div> 
 
<div class="test">content 3</div> 
 
<div class="test">content 4</div> 
 
<div class="test">conten4t 5</div> 
 

 
<button onClick="taskOne()">Task 1</button> 
 

 
<button onClick="taskTwo()">Task 2</button>

Answer 1

우선 getElementsByClassName이 아닌 getElementByClassName입니다. 이 클래스 이름을 가진 요소의 배열을 반환합니다.

var elements = document.getElementsByClassName('test'); 
 

 
function taskOne() { 
 
    for(let i = 0; i < elements.length; i++) { 
 
    let el = elements[i]; 
 
    el.style.backgroundColor = "blue"; 
 
    } 
 
} 
 

 
function taskTwo() { 
 
    for(let i = 0; i < elements.length; i++) { 
 
    let el = elements[i]; 
 
    el.className += " test-2"; 
 
    } 
 
}

.test { 
 
    background: lightgreen; 
 
} 
 

 
.test-2 { 
 
    background: orange !important; 
 
}

<div class="test">content</div> 
 
<div class="test">content 2</div> 
 
<div class="test">content 3</div> 
 
<div class="test">content 4</div> 
 
<div class="test">content 5</div> 
 

 
<button onClick="taskOne()">Task 1</button> 
 

 
<button onClick="taskTwo()">Task 2</button>

Answer 2

getElementByClassName()에 대한 감사, 단수, 존재하지 않습니다. 대신 getElement s ByClassName()을 사용해보십시오. 요소가 아니라 요소 배열을 반환한다는 사실을 알고 있어야합니다.

Answer 3

VAR document.getElementByClassName EL = ("테스트");

정확한 방법 이름은 getElementsByClassName이므로 얻고있는 TypeError입니다.

또한이 메서드는 해당 클래스 이름을 가진 요소의 배열을 반환합니다. 즉, 배경색을 모두 설정하려면 for으로 각 루프를 반복 할 수 있습니다 (올바른 속성은 el.style.background). 예를 들어 el.style.background : 올바른 속성은 el.style.backgroundColor입니다. red.