无法更改跨度标记内的内容

问题描述：

我希望能够定位当前输入和同级<span>标记，并将此跨度的文本更改为“确定”或“不确定”，具体取决于输入是否为空。无法更改跨度标记内的内容

我现在只能通过选择键[0]来锁定第一个量程。我如何制作此代码，使其定位于CURRENT跨度？所以跨度1,2或3.

我的jsfiddle不起作用，代码在我的notepad ++中生效。也许我忘了一些东西来启动代码？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Opdracht 2: Onze Taal</title> 
    <link href="style.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript"> 
    function checkNotEmpty(formField){ //maak functie aan geef parameters mee 
     if(formField.value.length > 0){ //als waarde ongelijk is aan 0 dan 
      console.log("OK"); //log OK 
      document.getElementsByTagName("span")[0].innerHTML = "OK"; 
      return true; 

     } 
     else { 
      console.log("NOT OK"); 
      document.getElementsByTagName("span")[0].innerHTML = "NOT OK" 
      return false; 
     } 
    } 
    window.onload = function(){ 
     document.getElementById("naam").onblur = function(){ 
      checkNotEmpty(this); 
     }; 
     document.getElementById("email").onblur = function(){ 
      checkNotEmpty(this); 
     }; 
     document.getElementById("vraag").onblur = function(){ 
      checkNotEmpty(this); 
     }; 
    }; 

    </script> 
</head> 
<body> 
    <figure> 
     <img src="onzeTaal.jpg" alt="Onze Taal" title="Onze Taal" /> 
     <figcaption>Onze Taal</figcaption> 
    </figure> 
    <form name="taalvraag" method="get" action="#"> 
     <fieldset> 
      <legend>Stel uw vraag</legend> 
      <label for="naam">Uw naam:</label> 
      <input type="text" name="naam" id="naam" placeholder="naam" /> 
      <span class="melding" id="meldingNaam">1</span> 
      <br /> 
      <label for="email">Uw e-mailadres:</label> 
      <input type="email" name="email" id="email" placeholder="e-mail" /> 
      <span class="melding" id="meldingEmail">2</span> 
      <br /> 
      <label for="vraag">Uw vraag:</label> 
      <input type="text" name="vraag" id="vraag" placeholder="vraag" /> 
      <span class="melding" id="meldingVraag">3</span> 
      <br /> 
      <input type="submit" name="verzenden" id="verzenden" value="Verzenden" /> 
     </fieldset> 
    </form> 
</body> 
</html>

1）问题中的代码与jsfiddle不匹配;你有一个'window.onload'，另一个'document.ready'。 2）jsfiddle默认已经把所有东西都放在window.onload事件中，所以你的代码永远不会触发，因为事件已经消失了。 – JJJ

答

您需要更新从

document.getElementsByTagName("span")[0].innerHTML

到

formField.nextElementSibling.innerHTML

更新小提琴 - https://jsfiddle.net/26u5efzc/1/

答

固定的问题与F然后，创建一个新参数并使用它来查找当前输入和跨度元素

function checkNotEmpty(veld, melding){ //maak functie aan geef parameters mee 
     if(veld.value.length != 0){ //als waarde ongelijk is aan 0 dan 
      console.log("OK"); //log OK 
      melding.innerHTML = "OK"; 
      return true; 

     } 
     else { 
      console.log("NOT OK"); 
      melding.innerHTML = "NOT OK"; 
      return false; 
     } 
    } 
    window.onload = function(){ 
     document.getElementById("naam").onblur = function(){ 
      checkNotEmpty(this, document.getElementById('meldingNaam')); 
     }; 
     document.getElementById("email").onblur = function(){ 
      checkNotEmpty(this, document.getElementById('meldingEmail')); 
     }; 
     document.getElementById("vraag").onblur = function(){ 
      checkNotEmpty(this, document.getElementById('meldingVraag')); 
     }; 
    };

无法更改跨度标记内的内容

相关推荐