Why is oninput on my HTML not working with my JS

Question

Wanted to try replicating Google's search textbox in a simple way. This is the whole HTML:

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Search</title>
       <link rel="stylesheet" href="styles.css">
       <script type="text/javascript" src="extJs.js"></script>
   </head>
   <body>
       <div id="searchform">
           <div>
               <img class="gImage" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
           </div>
           <div>
               <form action="https://google.com/search" method="GET" role="search" id="gForm">
                   <div id="sBar">
                       <span class="material-icons" role="button">&#xe8b6;</span>
                       <input type="text" value="" name="q" onchange="cursorDisplay()" id="forClear">
                       <div id="xbutton">
                           <span class="ExCKkf z1asCe rzyADb" jsname="itVqKe" role="button" tabindex="0" aria-label="Clear" onclick="clearText()">
                               <svg focusable="false"
                                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-iml="1633938141181">
                                   <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                               </svg>
                           </span>
                       </div>
                   </div>
                   <input type="submit" name="bntK" class="sButton" value="Google Search" aria-label="Google Search">
                   <input type="submit" name="btnI" class="sButton" value="I'm Feeling Lucky" aria-label="I'm Feeling Lucky">
               </form>
           </div>
       </div>
       <script type="text/javascript">cursorDisplay();</script>
       <script type="text/javascript">clearText();</script>
   </body>
</html>

Focus on input and <div id="xButton"..> part.

Then this is my extJs.js:

function cursorDisplay() {
    var x = document.getElementById("xbutton");
    if(window.getComputedStyle(x).style.display === "none") {
        x.style.display = "inline-block";
    }
   // document.getElementById("xbutton").style.display = "inline-block";
}

function clearText() {
    document.getElementById("gForm").reset();
}

CSS:

.ExCKkf {
    visibility: visible;
    margin-right: 12px;
    height: 100%;
    color: #70757a;
    vertical-align: middle;
    outline: none;
}

#xbutton {
    display: none;
}

Anyone have an idea where my oninput or JS became wrong? I prefer no events since i just wanted a simple approach.

Check your developer console for errors

Professor Abronsius
– Professor Abronsius

2021-10-11 14:49:45 +00:00
Commented Oct 11, 2021 at 14:49 — Professor Abronsius
– Professor Abronsius, Commented Oct 11, 2021 at 14:49

Tom · Accepted Answer · 2021-10-11 14:51:12Z

1

You have to access directly to the display property. No need to add style.

if(window.getComputedStyle(x).display === "none") {

answered Oct 11, 2021 at 14:51

Tom

5,6893 gold badges13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Phaya Naga Over a year ago

tried removing it and updated the html a bit JS: document.getElementById("xbutton").display = "inline-block"; HTML: <input type="text" value="" name="q" oninput="cursorDisplay()" id="forClear"> but it doesnt work still

Tom Over a year ago

@PhayaNaga you have to remove style on the line I mentionned in my answer

Phaya Naga Over a year ago

i did remove but this is now the js:

function cursorDisplay() {     /*var x = document.getElementById("xbutton");     if(window.getComputedStyle(x).display === "none") {         x.style.display = "inline-block";     }*/     document.getElementById("xbutton").style.display = "block"; }

i've seen it had something to do w/ where i put my script in HTML HAHA. i now called cursorDisplay() after input instead of putting it at the bottom of the body. it works now.

Collectives™ on Stack Overflow

Why is oninput on my HTML not working with my JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related