여러 버튼의 토글시 버튼 색상이 변경되지 않습니다.

웹 페이지에 여러 개의 버튼이 있습니다. 그러나 클릭 할 때마다 버튼 하나씩 버튼 색상을 변경하려고합니다. 내 코드는 아래와 같습니다. 하지만 일하지 않아 .... 어떤 도움?여러 버튼의 토글시 버튼 색상이 변경되지 않습니다.

<html> 
<head> 
<script type="text/javascript"> 
function toggleColor(id) { 
if(document.getElementById(id).style.background !== 'rgb(255,0,0)') { 
    document.getElementById(id).style.background = '#FF0000'; 

} 
else { 
    document.getElementById(id).style.background = '#00FF00'; 
} 
} 
</script> 
</head> 
<body> 
<button type="button" id="1" style="background-color:#00FF00;" onclick="toggleColor(this.id)">1</button> 
</body>

출처

2013-09-27 Babanna Duggani

: 나는 아직 준비가되지 않은 말하고 싶지만 자신을 테스트하고, 그냥 계속 지켜라. (douche와 같이 소리 내고 싶지는 않지만 배울 더 좋은 방법이다.) – Nenotlep

이'background! == 'rgb (255,0,0) {'때문에 코드에 sintax 오류가 발생했을 것이다. 'background! == '# ff0000') {' – DontVoteMeDown

미안하지만 내 실수는 ... # ff0000이더라도 작동하지 않습니다. –

귀하의 문제는,이 색의 설정 후, 문자열 comparsion

if(document.getElementById(id).style.background !== 'rgb(255,0,0)')

배경의 실제 값에 서 rgb(255, 0, 0)

는 RGB 내부 공간에주의 하시고이다()

출처

2013-09-27 12:26:47

문제는 rgb() 내의 공백으로 발생했습니다. 이제 알았어. 감사합니다 –

배경이 배경 관련 속성 모음이기 때문에 background에서 backgroundColor로 변경하는 것도 좋습니다. http://www.w3schools.com/css/css_background.asp –

예. 감사 –

당신은 당신의 코드를 작성에서 구문 오류를하고 있습니다. 이 코드를 스크립트 태그 안에 넣으십시오.

<script> 
function toggleColor(id) { 
if(document.getElementById(id).style.background !== 'rgb(255,0,0)') { 
    document.getElementById(id).style.background = '#FF0000'; 

} 
else { 
    document.getElementById(id).style.background = '#00FF00'; 
    } 
} 
</script>

호프가이 문제를 해결하기 바랍니다.

감사합니다.

출처

2013-09-27 12:23:07

위의 코드를 확인하십시오. –

내가 본 후에 코드를 편집했습니다 ... 죄송합니다. 다른 솔루션을 찾고 있지만 코드가 작동하고 있습니다. –

문제 없습니다. 죄송합니다 내 실수 –

이것은 작동 코드입니다. 코드에 오류가 있습니다. 스크립트 태그가 없으며 if 문이 유효하지 않습니다. 작동하는이 코드를 사용하십시오.

<html> 
<head> 
<script> 
window.toggle = true; 
function toggleColor(id) { 
console.log(document.getElementById(id).style.background); 
console.log(document.getElementById(id).style.background.indexOf('rgb(0, 255, 0)')); 
if(document.getElementById(id).style.background.indexOf('rgb(0, 255, 0)')>0) 
    document.getElementById(id).style.background = '#FF0000'; 
else if(document.getElementById(id).style.background.indexOf('rgb(255, 0, 0)')>0) 
    document.getElementById(id).style.background = '#00FF00'; 
} 
</script> 
</head> 
<body> 
<button type="button" id="1" style="background:#00FF00;" onclick="toggleColor(this.id)">1</button> 
</body>

출처

2013-09-27 12:25:56 abcd

주요 문제는 공백을 포함 할 필요가있는 것입니다. 내 예제는 버튼으로 전달되므로 ID로 요소를 다시 가져올 필요가 없습니다.

예 JSBIN

HTML :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <button type="button" id="1" style="background-color:#00FF00;" onclick="toggleColor(this)">1</button> 
</body> 
</html>

자바 스크립트 :

function toggleColor(el) { 
if(el.style.background == 'rgb(0, 255, 0)') { 
    el.style.background = '#FF0000'; 
} 
else { 
    el.style.background = '#00FF00'; 
} 
}

는 학습 세션의 중간에처럼 당신의 코드가 보이는

출처

2013-09-27 12:33:56 guymid

여러 버튼의 토글시 버튼 색상이 변경되지 않습니다.

답변

관련 문제