无法更改 span 标记内的内容

cannot change content inside span tag

本文关键字：span 更新时间：2023-09-26

我希望能够定位当前输入和同级<span>标签，并将此范围的文本更改为确定或不确定，具体取决于输入是否为空。

我现在只能通过选择键 [0] 来定位第一个跨度。如何使此代码以针对当前跨度？所以跨度 1、2 或 3。

我的 jsfiddle 不起作用，代码在我的 notepadd++ 中原始工作。也许我忘记了启动代码的东西？

https://jsfiddle.net/26u5efzc/

<!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>

您需要

从

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

自

formField.nextElementSibling.innerHTML

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

通过以下方式

修复了此问题，创建一个新参数并使用它来查找当前输入和范围元素

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