JavaScript: Почему предупреждение отличается от поведения?

Question

У меня есть функция JavaScript, в которой я проверяю значение поля stageId, если его значение 2, тогда поле причины должно быть активировано, и это должно быть необходимо, то есть * должно появиться перед Reason box, эта функция работает нормально, но * впереди Причина Box появляется только на мгновение, а затем исчезает, на мгновение я имею в виду за очень короткий промежуток времени, но если у меня есть одно предупреждение в acitvateReason тогда * появляется и остается впереди Reason Box

JavaScript код

function activateReason(){ 
    alert('test'); 
    var stageId = $('#Main\\.stageId option:selected').val(); 
    if(stageId== '2') { 
    document.getElementById("Main.ReasonId").disabled=false; 
    document.getElementById("rqd.Main.ReasonId").style.display='inline'; 
    }else{ 
    document.getElementById("Main.ReasonId").disabled=true; 
    document.getElementById("rqd.Main.ReasonId").style.display='none'; 
    document.getElementById("Main.ReasonId").selectedIndex=""; 
    } 
} 

HTML код

<td width="15%" class="formLabel" align="right"> 
<form:label path="Main.ReasonId" cssClass="normalText" cssErrorClass="normalTextRed"> 
<span id="rqd.Main.ReasonId" style="display:none;"><sup><b>*</b></sup></span> 
Reject Reason: </form:label> 
</td> 
<td width="35%" class="formValue"> 
<form:select path="Main.ReasonId" cssClass="normalText" cssErrorClass="validationError" disabled="true"> 
<form:option value="" label="--Please Select--"/> 
<form:options items="${ReasonList}" itemValue="value" itemLabel="label"/> 
</form:select> 
</td> 

Я не могу понять, почему * появляется только на мгновение, когда сигнал тревоги нет, и если тревога присутствует * остается, я хочу * остаться, и я не уверен, как я могу это сделать, и также будет признателен, если кто-нибудь сможет объяснить это поведение?

Update: Я проверил в поджигатель, и кажется, что если у меня нет предупреждения в activateReason(), чем дисплей document.getElementById("rqd.Main.ReasonId").style.display='inline'; изменения от встраиваемого ни одному, и если у меня нет оповещения, чем остается рядной и так * появляется.

Не знаете, почему это происходит, я хочу сохранить *, но я не хочу иметь оповещение в методе activateReason, любые предложения?

Answer 1

Ответ:

За время того, я добавил еще один идентификатор, который вызывается, и делает звездочку, чтобы остаться, вот код, но не решение проблемы, я не уверен, что неправильно я делаю здесь, и поэтому очень ценю некоторые указатели или рекомендации для них.

Обновленный JavaScript код

function activateReason(){ 
    alert('test'); 
    var stageId = $('#Main\\.stageId option:selected').val(); 
    if(stageId== '2') { 
    document.getElementById("Main.ReasonId").disabled=false; 
    document.getElementById("rqd.Main.ReasonIdFor2").style.display='inline'; 
    }else{ 
    document.getElementById("Main.ReasonId").disabled=true; 
    document.getElementById("rqd.Main.ReasonId").style.display='none'; 
    document.getElementById("rqd.Main.ReasonIdFor2").style.display='none'; 
    document.getElementById("Main.ReasonId").selectedIndex=""; 
    } 
} 

Обновленный HTML код:

<td width="15%" class="formLabel" align="right"> 
    <form:label path="Main.ReasonId" cssClass="normalText" cssErrorClass="normalTextRed"> 
     <span id="rqd.Main.ReasonId" style="display:none;"> 
     <sup><b>*</b></sup> 
     </span> 
     <span id="rqd.Main.ReasonIdFor2" style="display:none;"> 
     <sup><b>*</b></sup> 
     </span> 
     Reason: 
    </form:label> 
</td> 
<td width="35%" class="formValue"> 
    <form:select path="Main.ReasonId" cssClass="normalText" cssErrorClass="validationError" disabled="true"> 
    <form:option value="" label="--Please Select--"/> 
    <form:options items="${ReasonList}" itemValue="value" itemLabel="label"/> 
    </form:select> 
</td> 

Опять же, это просто работа вокруг, но не окончательное решение, и был бы признателен, если некоторые полезные предложить для решения с этой проблемой.

Наблюдение При работе с JavaScript, всегда лучше иметь уникальные идентификаторы для всех элементов еще есть шансы на некоторые странные поведения.

Answer 2

некоторые функции в javascript останавливают код от продолжения (это называется blocking).

alert и confirm оба ждут ввода пользователя до того, как будет разрешен какой-либо код. confirm делает это как нужно, чтобы вернуть значение. alert делает это для целей отладки.

Вместо использования alert я настоятельно рекомендую использовать console.log, console.debug и console.error для отладки кода (с поджигатель или отладчик любого другого браузера)

Я также советую проверить, что консоль существует перед вызовом функции, так что вы дона 't бросать неожиданные ошибки, а не в режиме отладки: if (window.console) console.log('some value'); это замечательно для отладки объектов, так как вы сможете увидеть разбивку собственности.

Answer 3

Наиболее вероятным объяснением является то, что форма отправляется, и поэтому страница перезагружается. Этот «момент» - это время между вашим Javascript, отображающим звездочку страницы, заполняющей перезагрузку и перерисовку экрана.