输入框永远不会清除 - 但在 codepen 上工作正常

Question

我有一个简单的输入表单。<div id="inputboxforemailandpassword">  <label for="inputEmail" class="sr-only">Email address</label>  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>  <label for="inputPassword" class="sr-only">Password</label>  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required></div>    <hr>       <div id="apistatusmessage">  <p>loading...</p></div>        <button id = "buttonregister" class="btn btn-lg btn-primary btn-block" onclick="registration()" >  register</button>     <button id = "clearinput" class="btn btn-lg btn-primary btn-block" onclick="clearouttheinputboxes()" >  clearinput</button>  这是我正在使用的明确功能。function clearouttheinputboxes(){    var logopener="----entering clearouttheinputboxes----";    console.log(logopener);        //collect the email address and password.    var emailaddress = document.getElementById("inputEmail");    var password = document.getElementById("inputPassword");    emailaddress.setAttribute('value', "");    password.setAttribute('value', "");    var logcloser="----leaving clearouttheinputboxes----";    console.log(logcloser);    }我已经在我的代码笔上复制了这个，在这里。https://codepen.io/jay-pancodu/pen/oNbVrVV问题是这样的。a) 在 codepen 上，完全相同的代码可以很好地清除输入框。b）在我的网络应用程序上，无论我尝试清除多少次以及我在值中使用哪个值，输入框都会保留。那么，我在这里做错了什么。更新 1 - 很多评论建议我使用类似这样的东西password.value = "some value"; 这并不能解决我的问题。请检查我是否在 codepen 中获得了输出。不想使用 .value 方法。更新 2 - 看起来 CodePen 代码也不起作用更新 3 - 在 CodePen 上重现问题能够在输入任何内容之前设置和清除输入框。但是一旦你在框中输入，设置和清除值的能力就会丢失

Answer 1

.setAttribute('value', "")用下面提到的方法替换方法应该有效

function clearouttheinputboxes()

    {

        var logopener="----entering clearouttheinputboxes----";

        console.log(logopener);    

    

        //collect the email address and password.

    

        var emailaddress = document.getElementById("inputEmail");

        var password = document.getElementById("inputPassword");

    

        // emailaddress.setAttribute('value', "");

        // password.setAttribute('value', "");

        //replace the above 2 lines with the below code

    

        emailaddress.value = "";

        password.value = "";

    

        var logcloser="----leaving clearouttheinputboxes----";

        console.log(logcloser);    

    }

Answer 2

我认为您可能使问题过于复杂，并为看似非常简单的任务使用了太多功能。我相信，除非用户实际上自己输入了一些数据，否则目标是在表单输入中clear或（某个预定值）？set为此，也许以下内容可能会引起兴趣 - 一个函数处理两个按钮clear并且set（不确定第三个按钮用于）

document.addEventListener('DOMContentLoaded',e=>{

    let div=document.getElementById('inputboxforemailandpassword');

    let col=div.querySelectorAll('input[name="email"],input[name="password"]');

    

    let clickhandler=function(e){

        col.forEach( input=>{

            switch( this.textContent.toLowerCase() ){

                case 'clear':

                    if( input.value=='' || input.value==input.dataset.example )input.value='';

                break;

                case 'set':

                    if( input.value=='' && input.value!=input.dataset.example )input.value=input.dataset.example;

                break;

            }

        })

    };

    

    div.querySelectorAll('button').forEach( bttn=>{

        bttn.addEventListener( 'click', clickhandler );

    });

});

label{display:block;width:100%;margin:0.25rem auto;}

label input{float:right}

fieldset{border:1px dotted gray;margin:0.5rem auto}

<div id='inputboxforemailandpassword'>

    <fieldset>

        <label class='sr-only'>

            Email address 

            <input type='email' name='email' class='form-control' placeholder='Email address' data-example='[e-mail]' autocomplete='off' autofocus='true' required />

        </label>

        

        <label class='sr-only'>

            Password

            <input type='password' name='password' class='form-control' placeholder='Password' data-example='P45$W0rd' autocomplete='off' required />

        </label>

    </fieldset>

    

    <fieldset>

      <button class='btn btn-lg btn-primary btn-block'>clear</button>    

      <button class='btn btn-lg btn-primary btn-block'>set</button>

    </fieldset>

</div>

Answer 3

尝试这个element.value=""

function clearouttheinputboxes()

{

    var logopener="----entering clearouttheinputboxes----";

    console.log(logopener);    

    //collect the email address and password.

    var emailaddress = document.getElementById("inputEmail");

    var password = document.getElementById("inputPassword");

    emailaddress.value=""

    password.value=""

    var logcloser="----leaving clearouttheinputboxes----";

    console.log(logcloser);    

}

<div id="inputboxforemailandpassword">

  <label for="inputEmail" class="sr-only">Email address</label>

  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>

  <label for="inputPassword" class="sr-only">Password</label>

  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

</div>    

<hr>       

<div id="apistatusmessage">

  <p>loading...</p>

</div>        

<button id = "buttonregister" class="btn btn-lg btn-primary btn-block" onclick="registration()" >

  register

</button>     

<button id = "clearinput" class="btn btn-lg btn-primary btn-block" onclick="clearouttheinputboxes()" >

  clearinput

</button>  

Answer 4

您可以直接更改任何输入字段的值 = ''（空白）

我正在稍微更新您的代码。我在做什么，是直接改变输入字段的值。

function clearouttheinputboxes() {

   var logopener="----entering clearouttheinputboxes----";

   console.log(logopener);    

  //----directly changing values of the input fields by "id"

  document.getElementById("inputEmail").value = '';

  document.getElementById("inputPassword").value = '';

  var logcloser="----leaving clearouttheinputboxes----";

  console.log(logcloser);    

}

如果您遇到问题，请发表评论或回复，以便我更好地理解问题。