Disappearing div

[Jay@TastefulTitles.com]

When user enters something in search field, my onChange function opens a screen-size window that blurs everything showing, and a div containing the response in the middle of the screen. When I run it in DreamWeaver CS5 on my MacBook, it works fine. When I run it in Safari, the new divs flash on the screen, then disappear.

Running in the Safari debugger, I can step through the code that toggles the display of the new div, and it appears as it should. As soon as I step out of the toggle function, returning to the calling onChange command, it disappears without a trace. The relevant code is below. The function called by the entry field (function catFilter) ends with the call to function toggle(name), and everything seems fine through there.

As I said, in DreamWeaver it doesn't disappear, making me think the problem may not be in my code. Can anyone suggest a method to find out why it disappears?  

 

#shade { 
	text-align:center; 
	width:100%; 
	height:100%; 
	position:fixed;
	z-index:60;			<-- ensures shade div is above everything but menu -->
	top:0; 
	left:0; 
	background:rgba(200,200,200,.8);		<-- light gray; 80% opaque -->
	display:none;		<-- this is the default until a value is entered in the search field -->
}

<div id="shade" onClick="filterClick(event)" class="w3-container">
      <div class="w3-content w3-card-4 w3-white" style="width:340px; margin:auto; margin-top:6vh" >
         <header class="w3-content tt-header">
            <h5 id="catHead" >Browse our catalog </h5>
         </header>
         <div id="catalog" class="w3-content" style="max-height:60vh; padding-bottom:6px; overflow-Y:scroll"> 
            <!-- CATALOG ENTRIES ARE ADDED HERE BY JAVASCRIPT--> 
         </div>
      </div>
  </div>


      <form>
         <input class="w3-input" onChange="catFilter(this.value)" type="text" placeholder="Search: Composer & Title" style="width:320px; text-align:center; display:inline-block">
      </form>

function toggle(name) {
	var x = document.getElementById(name);
	var s = getComputedStyle(x);
	if(s.display=="block") {x.style.display = "none"} 
	else {x.style.display="block"}
}

 

[Jay@TastefulTitles.com]

The same is true in Chrome. I now see that the window is being redrawn (reloaded?), but I still have no idea why.

[dsonesuk]

Running in Dreamweaver never produce the result you expect, that's why you should get it to run through an browser outside of dreamweaver. You probably are getting getComputedStyle() of all possible multiple styles applied BUT! You are not using  getPropertyValue("display") to get actual property display value

https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

Did you not get a error in developers console regarding this? Accessed by (F12) on pc anyway.

Edited April 6, 2020 by dsonesuk

[Jay@TastefulTitles.com]

No, this generates no errors. It simply reloads (or at least redraws) the page on leaving the function.

I'm not understanding your point about getComputedStyle(). It returns the value used in drawing the display, which is what is required. The toggle() function has worked perfectly since changing to getComputedStyle(). It is after leaving that function, with the divs properly drawn, that I'm getting the redraw.

 

[dsonesuk]

OK! This sounds very much like your form is quickly submitting to itself, if a user presses enter within a input it is treated as a submission of a form. It seems very strange to see onChange event for a text input? Usually I would use one of the keypress events, onchange usually triggers after the element loses focus after value changes like checkbox, radio and select form elements, so this maybe the problem using onchange on text input.

[Jay@TastefulTitles.com]

I switched getPropertyValue() for getComputedStyle(), which seems to have been forcing the redraw. It works just as well, but gives the same results—it still flashes, then redraws.

FWIW, I can display div shade (and its catalog div) using a dropdown menu item to call the same toggle function, and there is no problem. The toggle function is also used to display the menu, and to close it after drawing shade.

If it would help to see what I've described, you may do so at TastefulTitles.com/NewIndex.html. To see how it's supposed to work, show the full catalog using the dropdown menu in the UL corner. (To hide the catalog, click anywhere outside it.)

To see the problem, scroll down to the search field and enter "Mozart" or "Mahler", or another name you saw in the full catalog.

If I eliminate the onchange(catFilter()) call, and replace it with onchange(toggle("shade")), the problem still exists. If I put an alert() after that, the alert gets shown before the div is drawn. After the alert is dismissed, the shade div is drawn, and then immediately erased as the screen redraws. 

[Jay@TastefulTitles.com]

After several hours of trying one thing and another, I finally hit on something that worked, and it seems to be in line with what you just posted: I removed the <form></form> tags enclosing the search field. I don't know whether any of my other changes had any effect, but now it is working exactly as intended. Thanks for your suggestions!

Edited April 7, 2020 by Jay@TastefulTitles.com