input box never clears - but works fine on codepen

Question

I have a simple input form.

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

and this is the clear function i am using.

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

I have replicated this on my codepen, here.

https://codepen.io/jay-pancodu/pen/oNbVrVV

The issue is this.

a) on codepen, the exact same code, clears the input box just fine. b) on my web app, the input boxes remain, no matter how many times i try to clear and whichever value I use in the value.

So, what am I doing wrong here.

Update 1 - Lot of comments suggesting I use something like this

password.value = "some value"; 

that does not solve the problem for me. please check that I am getting the output in codepen. dont want to use .value method.

Update 2 - It looks like CodePen code does not work either

Update 3 - Recreating the issue on CodePen

able to set and clear input boxes before anything is typed. but once you type in the boxes, the ability to set and clear values is lost

Answer 1

Try this 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 2

Replacing the .setAttribute('value', "") method with the below mentioned approach should work

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 3

I think you perhaps over-complicated the issue and used too many functions for seemingly quite a simple task. The goal is, I believe, to clear or set ( some predetermined value ) in the form inputs unless the user has actually entered some data themselves? To that end perhaps the following might be of interest - a single function handles both buttons clear and set ( was unsure that the third button was for )

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='joe.bloggs@example.com' 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 4

you can directly change the value of any input field = '' (blank)

I am updating your code a little bit. what I am doing, is directly changing the value of input fields.

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

}

if you face issues, please comment or reply, so that I can understand the issue better.