JavaScript重構無法正常工作 - getElementById返回null

我正在寫一個腳本，如果textarea中沒有足夠的單詞，將顯示一條錯誤消息。JavaScript重構無法正常工作 - getElementById返回null

時，我明確指出我針對的元素，它工作得很好：

HTML：

<div class="form-group"> 
    <label for="trainee[about]">About <span>(Minimum 20 words)</span></label> 
    <textarea id="aboutText" type="text" name="trainee[about]" cols="80" rows="10" onkeypress="activateSubmit();"> 
    <%= @profile["about"] %> 
    </textarea> 
    <p id="aboutError" class="word-error">Min. 20 words!</p> 
</div>

的JavaScript：

function activateSubmit(){ 
    var len = $('#aboutText').val().split(" ").length; 
    console.log(len); 
    if(len >= 20) { 
    document.getElementById('aboutError').style.display = "none"; 
    } else { 
     document.getElementById('aboutError').style.display = "block"; 
    } 
}

然而，當我試圖重構它這樣我可以在多個字段上使用它我收到一個錯誤說：

Uncaught TypeError: Cannot read property 'style' of null

這裏是重構的代碼：

HTML：

<div class="form-group"> 
    <label for="trainee[about]">About <span>(Minimum 20 words)</span></label> 
    <textarea id="aboutText" type="text" name="trainee[about]" cols="80" rows="10" onkeypress="activateSubmit(aboutText, aboutError);"> 
      <%= @profile["about"] %> 
    </textarea> 
    <p id="aboutError" class="word-error">Min. 20 words!</p> 
</div>

和JS：

function activateSubmit(idText,idError){ 
    var len = $(idText).val().split(" ").length; 
    console.log(len); 
    if(len >= 20) { 
    document.getElementById(idError).style.display = "none"; 
    } else { 
    document.getElementById(idError).style.display = "block"; 
    } 
}

的JavaScript是在頁面的底部，所以它不應該是這樣的元素尚未加載，加上它在重構之前工作。

任何想法？感謝

來源

2016-02-27 Danny Santos

您需要報價這裏'onkeypress事件=「activateSubmit（aboutText，aboutError）;'* * ==> **'onkeypress =「activateSubmit（'aboutText'，'aboutError'）;'。另外，爲什麼不使用jQuery。 – Tushar

我也會建議使用jQuery的'on'來綁定事件。 '（'＃aboutText'）。on（'keyup'，function（）{$（'＃aboutError'）。toggle（$（this）.val（）。split（/ \ s + /）。length <20） ;}）;' – Tushar

啊這麼明顯！非常感謝，欣賞它。我沒有使用jQuery的原因是因爲我真的不知道任何對JS非常新穎的東西，只是試圖讓一些東西臨時進行，而我學到更多 –

將其正確傳遞arguments在聯事件處理程序，

.... onkeypress="activateSubmit('aboutText', 'aboutError');">

，但可避免使用內嵌處理器的最佳方法，請參見下面的代碼，

$("#aboutText").keypress(function(){ 
    $(this).next("#aboutError").toggle($(this).val().split(" ").length <= 19) 
});

還是一個體面的方法將創建一個類，並在當時添加它，

CSS：個

.hide{ display:none; } 
p.show{ display:block; }

JS：

var erroElem = $("#aboutText").keypress(function(){ 
    erroElem.toggleClass("show", ($(this).val().split(" ").length < 20)) 
}).next("#aboutError").addClass("hide");

來源

2016-02-27 10:37:38

@Tushar我們也可以像寫成<<= 19：D –

@Tushar實際上是在開玩笑！剛剛在新版本中使用了<20' –

這裏有幾個提示：** 1。**'$（this）.next（「＃aboutError」）'爲什麼？只需使用'$（「＃aboutError」）'因爲ID是**唯一**。 ** 2。**使用'split（/ \ s + /）' – Tushar

試試這個：

function activateSubmit(idText,idError){ 
var len = $('#'+idText).val().split(" ").length; 
    console.log(len); 
if(len >= 20) { 
    document.getElementById(idError).style.display = "none"; 
} else { 
    document.getElementById(idError).style.display = "block"; 
}

}

來源

2016-02-27 10:58:05

JavaScript重構無法正常工作 - getElementById返回null

回答

相關問題