Javascript가 html 배경색을 지속적으로 변경하지 않습니다.

여러분. 나는 당신이 나를 도울 수 있기를 바라고, 버튼을 클릭하여 javascript를 통해 내 문서의 본문 부분의 색을 변경하려고합니다.Javascript가 html 배경색을 지속적으로 변경하지 않습니다.

세 개의 버튼이 있으며 각각 배경색을 설정합니다. 문제는 :

<html> 
<head> 
    <script type="text/javascript"> 
    function colorish(my_color){ 
     if (my_color === 'gray'){ 
     document.body.style.background = '#CCCCCC'; 
     }else if (my_color === 'orange'){ 
     document.body.style.background = '#FF9900'; 
     }else if (my_color === 'blue'){ 
     document.body.style.background = '#C1DAD6'; 
     } else { 
     alert('on else'); 
     } 
    } 
    </script> 
</head> 

<body style="background: orange;"> 
    <form> 
    <button name="back_color" onclick="colorish('gray')">Gy</button> 
    <button name="back_color" onclick="colorish('orange')">Oe</button> 
    <button name="back_color" onclick="colorish('blue')">Be</button> 
    </form> 
</body> 
</html>

스크립트가에 : 나는 '그들 중 하나를 클릭하면 여기 내 코드의 샘플입니다, 다음은 원래 설정 색상에 반환, 잠깐의 배경 색상을 변경 내 환경에서 별도의 파일을 사용하지만 정확히 동일합니다.

스크립트에 나는 포함하는 경우 :.

onload = selector(); 

function selector(){ 
    var buttons = document.getElementsByName('back_color'); 

    buttons[0].onclick = colorish('gray'); 
    buttons[1].onclick = colorish('orange'); 
    buttons[2].onclick = colorish('blue'); 
}

그것은 단지이 경우에는 파란색되고, 마지막 과제로 설정 배경에 ... 할당 모든 버튼 []을 입력하고 떠난다.

저는 전문가가 아니기 때문에 js와 함께 html에 대해 놓친 내용이있을 수 있습니다.

출처

2014-07-16 JuanKman94

팁 jquery를 사용하면 더 쉽게 삶을 살 수 있습니다. - www.jsfiddle.net –

버튼을 클릭하면 페이지가 다시로드됩니까? – David

예. 코드를 실행하면 페이지가 다시로드됩니다. –

버튼에 type을 지정하지 않으면, 마치 type="submit" 인 것처럼 동작합니다. <form> 요소에는 구성된 action 매개 변수가 없으므로 action은 액세스 한 것과 동일한 페이지입니다. 2 초 동안 배경이 나타나고 정상적인 색상으로 돌아가는 것은 아니며, 페이지가 다시로드되고 이 마치 인 것처럼 그 색상으로 다시 기본 설정됩니다.

이 동작을 중지하려면 각 버튼을주는 type="button" :

<button type="button" name="back_color" onclick="colorish('gray')">Gy</button> 
<button type="button" name="back_color" onclick="colorish('orange')">Oe</button> 
<button type="button" name="back_color" onclick="colorish('blue')">Be</button>

보조 노트로

, 데이터를 제출하는 양식의 한 부분으로 버튼을 사용하지 않는 경우, 당신 돈 해당 <form> 노드가 필요합니다. 그들은 스스로 기능을 발휘하고 표준을 준수합니다.

출처

2014-07-16 17:48:06 esqew

와우, 바로 내가 놓친 뭔가가있다. 고마워요! 지금부터는 그 형식에 대해 생각해 보겠습니다. – JuanKman94

<form> 태그를 제거하면 문제가 해결됩니다. 버튼을 클릭하면 양식이 제출되고 페이지가 다시로드되어 페이지가 원래 상태로 재설정됩니다.

출처

2014-07-16 17:48:46 user2349072

이것이 왜 downvoted인지, 실제로 코드를 수정하는지, 제공된 코드가 양식을 필요로하지 않는지를 잘 모르겠다. 그가 양식이 필요하다면 다른 답변이 더 정확할 것입니다. – DasBeasto

@ user2070057 : 품질이 낮은 게시물입니다. 그것이 질문에 대답 할 수 있더라도, 그것은 품질과 유용성이 낮습니다. 이것이 하향 회선이 의미하는 것입니다. – Brian

나는 그것이 다른 대답처럼 정교 할 수 있다고 생각하지만, 문제가 해결되고 왜 한 문장으로 완전하고 수용 가능한 대답인지 설명한다. – DasBeasto

Javascript가 html 배경색을 지속적으로 변경하지 않습니다.

답변

관련 문제