Question

当我尝试在catch语句中添加一个类时，我遇到了问题。

当我点击按钮确认时，javascript向我显示成功添加类的错误，但是当我重新点击按钮而不刷新页面时，添加的类不再存在。

＆＃13;

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';
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它将类错误附加到变为“ errorerror ”的类，因此CSS不起作用。

result.className += 'error ';

这应该对你有用，或者你可以在添加类之前检查它是否有类错误然后相应地添加

Answer 2

注意：我还没有测试过这个

如果出错，您将附加字符串＆＃39;错误＆＃39;到className。这导致以下结果：

className == ''

error occurs

className == 'error'

error occurs

className == 'errorerror'

第二个错误后，班级名称错误＆＃39;不再被认可。由于css类是由空格分隔的，你可以通过在你的班级名称前加上错误来解决这个问题＆＃39;错误＆＃39;有空格：

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

编辑：如果可以的话，我建议使用jQuery

Answer 3

问题是如何添加类。你继续添加它们

result.className += 'error';

意味着它将是

errorerror

第二次运行。

在现代浏览器中，您可以使用element.classList.add(classnameToAdd)

result.classList.add("error");

＆＃13;

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');
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

在catch语句中添加一个类

3 个答案: