asked on

JavaScript Problem - Button Clear

Hello, Experts,

I am learning Javascript, HTML, and CSS. I have a decent understanding of how it works and starting to practice building my own web application to get hands-on experience.

PROBLEM:

I have created two buttons on my HTML page one submit and one reset. What is supposed to happen is when someone passes a value into the text field and hits submit it sends it to the JS side to compute and innerHTML the output on the screen with a <div></div>. This works no problem. What does not work is when I click the reset button it does not clear the innerHTML.

CODE:

HTML -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>Title</title>
</head>
<body>
    <!--nav bar-->
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img class="cba" src="/assets/CBA.png" alt="">
        </a>
    </nav>

    <!--form-group-->
    <form id="searchform">
        <div class="form-group">
            <label class="form-group-label">Enter Store UIN Here:</label>
            <input class="form-control" id="usrInput" placeholder="Ex: TX001" type="text">
            <button class="btn btn-primary" type="button" id="buttonSubmit" onclick="clicked();">Submit</button>
            <button class="btn btn-primary" type="button" id="buttonReset" onclick="reset();">Reset</button>
        </div>
    </form>

    <div class="displayText" id="display"></div>

<!--    <script src="js/refactorcss.js"></script>-->
    <script src="js/app.js"></script>
</body>


</html>

Open in new window

JavaScript -

function clicked(){
    let grabInput = document.querySelector('input').value;
    console.log(grabInput);
    document.getElementById('display').innerHTML = grabInput;
}

function reset(){
    document.getElementById('display').innerHTML = "";
}

Open in new window

Any help would be greatly appreciated. What am I missing here?

Norie

Try changing the name of the function being called when you click the 'reset' button - I believe reset() is a method of the form element.

lenamtl

Hi,

here is the fixed code
https://jsfiddle.net/lenamtl/2bdf7x3L/

<form id="searchform">
        <div class="form-group">
            <label class="form-group-label">Enter Store UIN Here:</label>
            <input class="form-control" id="usrInput" placeholder="" type="text">
            <button class="btn btn-primary" type="button" id="buttonSubmit" >Submit</button>
            <button class="btn btn-primary" type="button" id="buttonReset" >Reset</button>
        </div>
    </form>

    <div id="result"></div>

Open in new window

$('#buttonSubmit').click(function(){
    var uin = $('#usrInput').val();
   
    $('#result').empty();
    $('#result').append('<p>uin: ' + uin + '</p>');
});


$('#buttonReset').click(function(){ 
   document.getElementById("searchform").reset();
    $('#result').empty();

});

Open in new window

Isaiah Melendez

ASKER

Hmm, @lenamtl, I copied your code, reviewed it, modified my end to match and I get no output on the DOM. Thoughts?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Norie

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

@Norie,

Apologies - missed your post completely.

Isaiah Melendez

ASKER

@Norie, I did change it as you suggested initially but not completely (buttonreset();) as @julian had suggested (clearSubmission();).

I have awarded both of you guys the solution.

Thank you for your help.

Julian Hansen

buttonreset() should have worked just as well as clearSubmission() - just as long as it is not reset() which is defined on the form object and resets the form.

Isaiah Melendez

ASKER

I also think clearing the cache locally on the browser also helped out. But framing the concept and completely changing the function named helped me move on from the previous solution.

Again, thanks for your help.