catch 문에 클래스 추가

Question

catch 문에 클래스를 추가하려고 할 때 문제가 있습니다.

확인 버튼을 클릭하면 자바 스크립트가 성공적으로 추가 된 클래스의 오류를 표시하지만 페이지를 새로 고치지 않고 버튼을 다시 클릭하면 클래스가 더 이상 존재하지 않습니다.

function catchclass(){ 
 
    var result, x; 
 
    result = document.getElementById("result"); 
 
    result.innerHTML = ""; 
 
    x = document.getElementsByTagName("input")[0].value; 
 
    try { 
 
     if(x == "") throw "is Empty"; 
 
    } 
 
    catch(err) { 
 
     result.innerHTML = "Input " + err; 
 
     result.className += 'error'; 
 
    } 
 
}

p.error { 
 
    background: red; 
 
    padding: 10px; 
 
}

<input type="text" /> 
 
<button type="button" onclick="catchclass()">Test Input</button> 
 

 
<p id="result"></p>

Answer 1

문제는이 클래스 오류가 아닌지 후 추가하는 것이 클래스를 추가하기 전에 확인할 수 있습니다. 당신이 그들을 추가 계속

result.className += 'error'; 

는

errorerror 

가 실행됩니다 두 번째 시간이 될 것을 의미합니다. DOM을 모든 페이지에 대한 재실행하기 때문에

최신 브라우저에서는 element.classList.add(classnameToAdd)

result.classList.add("error"); 

---

function catchclass(){ 
 
    var result, x; 
 
    result = document.getElementById("result"); 
 
    result.innerHTML = ""; 
 
    result.classList.remove('error'); 
 
    x = document.getElementsByTagName("input")[0].value; 
 
    try { 
 
     if(x == "") throw "is Empty"; 
 
    } 
 
    catch(err) { 
 
     result.innerHTML = "Input " + err; 
 
     result.classList.add('error'); 
 
    } 
 
}

p.error { 
 
    background: red; 
 
    padding: 10px; 
 
}

<input type="text" /> 
 
<button type="button" onclick="catchclass()">Test Input</button> 
 

 
<p id="result"></p>

Answer 2

참고 :이 오류에

, 당신은 클래스 이름을 문자열 '오류'추가되어 테스트하지 않았습니다. 결과는 다음과 같습니다.

두 번째 오류가 발생하면 클래스 이름 'error'가 더 이상 인식되지 않습니다. CSS 클래스가 공백으로 구분되어 있기 때문에, 당신은 공간 클래스 이름 '오류'접두사에 의해이 문제를 해결할 수 :

result.className += ' error'; //note the space 

편집 : 당신은 그것은을

Answer 3

추가되는 수 있는지 jQuery를 사용하는 것이 좋습니다 것 클래스 오류가 'errorerror'이되어 CSS가 작동하지 않습니다.

result.className += 'error '; 

이

당신을 위해 작동해야한다 또는 당신은 당신이 클래스를 추가하는 방법에 따라