The problem is here $("#main").html() = $(id).html();, you are assigning HTML content incorrectly.
So you should fix like this
$("#main").html($(id).html());
var portals = ["language", "constructedlanguages"];
var searchterm, id;
function randPortal(array) {
return array[Math.floor((Math.random()*array.length))];
}
$("#search").attr("placeholder", "e.g. " + randPortal(portals));
$("#searchbtn").click(function() {
searchterm = $("#search").val();
id = "#" + searchterm;
if (portals.indexOf(searchterm) != -1) {
$("#main").html($(id).html());
}
});<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<style>
div.content { display: none; }
</style>
<input id="search" type="text" placeholder="" />
<button id="searchbtn">Search</button>
<hr/>
<div id="main"></div>
<div class="content">
<div id="language">testy - it works!!</div>
</div>
Want to improve this question? Add details and clarify the problem by editing this post .
I’ve been trying to make a page where you type in a topic, like language, and then the div with an id of language pops up. I want it to hide first. It doesn’t work, however. Here’s a snippet:
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<style>
div.content { display: none; }
</style>
<input id="search" type="text" placeholder="" />
<button id="searchbtn">Search</button>
<hr/>
<div id="main"></div>
<div class="content">
<div id="language">testy - it works!!</div>
</div>
<script>
var portals = ["language", "constructedlanguages"];
var searchterm, id;
function randPortal(array) {
return array[Math.floor((Math.random()*array.length))];
}
$("#search").attr("placeholder", "e.g. " + randPortal(portals));
$("#searchbtn").click(function() {
searchterm = $("#search").val();
id = "#" + searchterm;
if (portals.indexOf(searchterm) != -1) {
$("#main").html() = $(id).html();
}
});
</script>
