toLowerCase가 깨졌습니다.

Question

toLowerCase() 기능에 문제가 있습니다. 텍스트 영역에서 텍스트를 편집해야합니다. 기본 색상 변경 기능을 사용하면 텍스트 영역에 색상을 입력 할 수 있습니다. if 문을 사용하고 toLowerCase()를 추가하기 전에 정상적으로 작동하고있었습니다.

function colourChange() { 
    var the_colour = document.forms["formTwo"]["textBox"].value; 
    the_colour = the_colour.toLowerCase(); 

    if(the_colour == "red") { 
     document.formOne.textArea.style.color ="red"; 
    } else if (the_colour == "blue") { 
     document.formOne.textArea.style.color ="blue"; 
    } else if (the_colour == "green") { 
     document.formOne.textArea.style.color ="green"; 
    } else if (the_colour == "yellow") { 
     document.formOne.textArea.style.color ="yellow"; 
    } else { 
     alert("Please enter red, blue green or yellow") 
    } 

내 HTML

<script type="text/javascript" src="file.js"> 
</script> 
<form name="formOne"> 
<textarea rows="5" cols="45" id="textArea" name="textArea"> 
</textarea> 
</form> 

<form name="formTwo"> 
Colour:<input type="text" name="textBox" value="red, blue, green or yellow."> 

어떤 아이디어가?

Answer 1

오류 콘솔을 사용하여 구문 오류가 발생했습니다. form 태그에 이름 속성을 부여하면 안됩니다.

이 시도 :

function colourChange(theForm) 
{ 
    var color = 
    { 
    red : "red", 
    blue : "blue", 
    green : "green", 
    yellow : "yellow" 

    }[ theForm["textBox"].value.toLowerCase() ]; 

    color ? document.getElementById('formOne').textArea.style.color = color 
     : alert("Please enter red, blue, green or yellow"); 

    return false; 
} 

</script> 

은 위 삼항 문이 후 객체에 연관 조회를 사용합니다.
html로는

<form id="formOne"> 
<textarea rows="4" cols="50" id="textAreav" name="textArea" style='font-weight:bold;font-size:1.5em'> 
TEXT 
</textarea> 
</form> 

<form> 
Colour:<input type="text" name="textBox" value="red, blue, green or yellow."> 
<button onclick="return colourChange(this.form)">Change Colour</button> </body> 
</form> 

</html> 

마지막으로 코드 내부에 2 개 양식 태그를 제거하시기 바랍니다있다.

Answer 2

하는 데 도움이

희망이 내가 할 것 인 것이다 :

html로 : 당신이 볼 수 있듯이, 나는 양식에 대한 이름을 부여하지했습니다

<form> 
    <textarea rows="5" cols="45" name="textArea"></textarea> 
</form> 

<form> 
    Colour:<input type="text" name="textBox" value="red, blue, green or yellow."> 
</form> 

. 양식에 이름을 부여하는 것은 불필요합니다. 필드 이름을 지정하면됩니다. 그 정도면 충분합니다.

자바 스크립트 :

function colorChange() { 
    var color = textBox.value.toLowerCase(); 

    switch (color) { 
    case "red": 
    case "blue": 
    case "green": 
    case "yellow": 
     textArea.style.color = color; 
     break; 
    default: 
     alert("Please enter either red, blue, green or yellow."); 
    } 
} 

명명 된 필드가 직접 이름 자체를 사용하여 자바 스크립트에 액세스 할 수 있습니다.