BukkitmanPlays MCPE BukkitmanPlays MCPE - 1 month ago 5
CSS Question

changing display property of a divider in JavaScript

I am working on this program in HTML (with of course CSS and JS) but I am having troubles with some code cause I want to make an area be managable so that you can make it visible, and invisible when ever you want. if you dont get what I mean, I will just show you in code.



//browserSearching.js
// First, the variables!
var link = document.getElementById("searchbar").value;
var page = document.getElementsByTagName("iframe").src;

var button = {
menu: document.getElementById("dropdown"),
enter: document.getElementById("enter"),
back: document.getElementById("back"),
forward: document.getElementById("forward")
}

var more = document.getElementById("more");

// Now it is time for functions!

function enableMore() {
if (more.style.display == "block") {
more.style.display == "none"
} else {
more.style.display == "block"
}
}

function update() {
link = document.getElementById("searchbar").value;

setTimeout(update, 1);
}

// style.css
#splitter {
margin-bottom: 0px;
}

// This part is not really needed

<!--Indext.html-->
<!DOCTYPE html>
<html>
<head>
<title>Web Browser in Web Browser</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="data.js"></script>
</head>
<body style="margin: 0px;" onload="update();">
<browser>
<div id="top">

<!-- First Layer -->
<div id="tabs">
<tab></tab>
</div>
<br /><!-- Second Layer --> <hr />
&#160;
<button id="back">&#60;</button>
<button id="forward">&#62;</button>
<button id="home">H</button>

<input id="searchbar" style="width: 1107px;" />
<button id="enter" onclick="page = link;">Ent</button>

<button id="dropdown" onclick="enableMore();"> : </button>

<div id="more" style="display: none;">

<!-- This is all one button, and it was hard! -->
<label for="themes" class="button">Upload CSS Theme</label>
<input id="themes" style="display: none;" type="file" />
<!-- End of the button -->
</div>
</div>
<hr id="splitter"/>
<iframe name="webpage" src="browser.html" width="1277.5px" height="640px" style="border-width: 0px;"></iframe>
</browser>
<script src="browserSearching.js"></script>
</body>
</html>





do you get what I am trying to say now? just press the [:] button... it doesn't show anything when pressed

Answer

In your enableMore() function, you're doing a comparison, when you need to do an assignment.

Change your == to = as follows:

function enableMore() {
    if (more.style.display == "block") {
        more.style.display = "none" // Double-equals changed to single
    } else {
        more.style.display = "block" // Double-equals changed to single
    }
}

Working Codepen

Comments