Develop Reference

style.display="none"; doesn't work with javascript DOM

a beginner here, i'm trying to make a modal that will be shown once the share button is clicked and i don't seem to find why the onclick function isn't executed, the idea is once the share button is clicked the display:none; will be changed to display:block, so either there is a problem with style.display="block" or, which is more probable, i suck .
Any help is appreciated.
Thank you previously.
HTML code:
<div class="navbar-container">
<div class="nav nav-1" >
<button class="btn btn-1" id="sharebtn">Share </button>
</div>
<div class="nav nav-2">
<button class="btn btn-2" id="howbtn">how does it work ?</button>
</div>
<div class="nav nav-3" >
<button class="btn btn-3" id="abouttns">About</button>
</div>
</div>
<!---Creating the modals-->
<div id="modal-share">
<div class="modal-header">
<button class="close-share">×</button>
</div>
<div class="link">
<input type="text" class="link-input" placeholder="www.youtube.com/jdlkfsjakfdsa">
<button id="share-btn" onclick="fuck">share</button>
</div>
<div class="description">
<input type="text" max="50" placeholder="cats are not that smart">
</div>
</div>
CSS code:
#modal-share{
display: none; /*hidden by default*/
position: fixed; /*staying in the center even when scrolling*/
z-index: 1; /*stays on top of grids, 3D translation*/
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: white; /*color of the modal*/
background-color: rgba(0,0,0,0.4); /*color of the background*/
border:1px solid black;
}
Javascript code:
<script>
var modal=document.getElementById("modal-share");
var share_btn=document.getElementsById("sharebtn");
var close_share=document.getElementsByClassName("close-share");
share_btn.onclick=function(){
modal.style.display="block";
}
close_share.onclick=function(){
modal.style.display="none";
}
window.onclick=function(event){
if(event.target==modal){
modal.style.display="none";
}
}
</script>

There is actually an error in your script which is causing everything else to fail, namely
var share_btn=document.getElementsById("sharebtn");
There is no function document.getElementsById, only document.getElementById. I have your code working with the fix on the following link -
https://jsfiddle.net/2pfzc4gL/

There is a typo in your script which is causing the issue.
var share_btn=document.getElementsById("sharebtn");
it should be getElementById instead of getElementsById.
it would be better if we use querySelector for querying DOM element and for events addEventListener instead of overriding the click function
var share_btn = document.querySelector("#sharebtn");
var close_share = document.querySelector(".close-share");
var modal = document.querySelector("#modal-share");
share_btn.addEventListener("click", function () {
modal.style.display = "block";
});
close_share.addEventListener("click", function () {
modal.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
});

Two things, first there's a typo in your code getElementsById should be getElementById. And the second is that getElementsByClassName returns an array like collection of elements so you need to retrieve the first one from the array. Here's the updated javascript.
const modal = document.getElementById("modal-share");
const share_btn = document.getElementById("sharebtn"); // typo here in original
const close_share = document.getElementsByClassName("close-share")[0]; // select first element in HTML collection
share_btn.onclick = function () {
modal.style.display = "block";
}
close_share.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

How to fix issue with "previous button" using JavaScript

I am "emulating" a Gravity Form. I am using a previous button for my form. I know the best way to solve the problem is by 'telling' the function the id of the current div (display: block) but I don't know how.
In the first part of the code, I show or hide divs based on the selected option of the tag select, now, in the second one is where I configure the "previous button".
<script>
function yesnoCheck(that) {
if (that.value == "2") {
document.getElementById("b").style.display = "block";
document.getElementById("a").style.display = "none";
<?php $new="b" ?>
} else {
document.getElementById("a").style.display = "none";
document.getElementById("d").style.display = "block";
}
}
</script>
<script>
function yesnoCheck2(that) {
if (that.value != " ") {
document.getElementById("c").style.display = "block";
document.getElementById("a").style.display = "none";
document.getElementById("b").style.display = "none";
<?php $new="c" ?>
} else {
document.getElementById("a").style.display = "none";
}
}
</script>
<script>
function yesnoCheck3(that) {
if (that.value != " ") {
document.getElementById("d").style.display = "block";
document.getElementById("c").style.display = "none";
<?php $new="f" ?>
} else {
document.getElementById("c").style.display = "none";
}
}
</script>
<script>
function yesnoCheck4(that) {
if (that.value.length == 8) {
document.getElementById("tform").style.display = "block";
} else {
document.getElementById("tform").style.display = "none";
}
}
</script>

It isn't entirely clear what you're trying to do, but what I think you're trying to do is navigate through a set of sections in a form as if they were different pages.
One really easy way to do this is to use the :target CSS selector, which allows you to select elements that match the ID of the current page's anchor fragment. For example, if I had a section with the ID of main, and the URL was something like https://example.com/#main, I could use section:target to show that section.
Here's a full example for you. HTML:
<section id="one">
<h1>Section 1</h1>
<p>
This is section one. Content goes here.
</p>
Next
</section>
<section id="two">
<h1>Section 2</h1>
<p>
This is section two. More content goes here.
</p>
Previous
Next
</section>
<section id="three">
<h1>Section 3</h1>
<p>
This is the last section.
</p>
Previous
</section>
CSS:
.button {
background: #333;
color: #fff;
text-decoration: none;
padding: 0.5em 1em;
border-radius: 0.3em;
}
section {
display: none;
}
section:target {
display: block;
}
Finally, some JavaScript to initialize things:
// Default to the first section
if (!location.hash.substr(1)) {
location.hash = 'one';
}
The buttons are just links to the next section, by way of anchor fragment.
This example is up on JSFiddle here: https://jsfiddle.net/91pnc3gf/

show and hide div onclick

I create this code to show and hide div this code work but when i use it with php not work correctly when i click show for the first div he show me the div
but when i click the second he show me the first not the second how to solve this?
include("connect.php");
$sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
echo'<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
echo"</tr></thead><tbody>";
while($row=mysqli_fetch_array($sql)){
$title=$row['db_title'];
$code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener">Show Code</div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";
echo"<td data-title='Code'>";echo"<pre><code class='' ><";?><?php echo $row['db_code'];?><?php echo"></code></pre>";echo"</td>";
}
?>
</body>
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>

You are creating an html in a loop where you are using fixed id value instead of a dynamic one. This cause an id conflict. So your code will not work as desired. This only takes the first id of the page always.
I have written some dynamic content as per your requirement below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="showContent buttonCode">Show Code</a>';
echo' ';
echo'<a class="hideContent buttonCode">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.showContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').show();
});
$('.hideContent').on('click', function(e) {
$(this).nextAll(':has(.benefits):first').find('.benefits').hide();
});
</script>
Hope this will help you.
If you want it with javascript only then you can do like below:
<style>
.buttonCode{
border:1px solid #000;
background-color:#ccc;
border-radius:5px;
}
</style>
<?php
for($i=0;$i<3;$i++) {
$title = "Title-".$i;
$content = "Content-".$i;
echo $title;
echo'<br>';
echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
echo' ';
echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>';
echo'<br>';
echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'><".$content."></code></pre>";
echo'<br>';
}
?>
<script>
function showbenefit(s) {
if(document.getElementById('benefits-'+s).style.display=='none') {
document.getElementById('benefits-'+s).style.display='block';
}
return false;
}
function hidebenefit(h) {
if(document.getElementById('benefits-'+h).style.display=='block') {
document.getElementById('benefits-'+h).style.display='none';
}
return false;
}
</script>

function show_hide(){
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
else if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
<div id="benefits" style="display:block">test</div>
Submit
Hello! Hope this help you!
p.s you can use .toggle() to show and hide in JQuery

Creating popup boxes using html css and javascript

basically i'm trying to create multiple popup boxes that appear when different links are clicked. For some reason, a popup box only appears when the first link is clicked. When the rest of the links are clicked, nothing happens. Any help is appreciated, thanks. Also, I've only included 2 of the links in this example.
javascript code:
function xpopup() {
document.getElementById("x").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("xPopup");
overlay.style.display = "block";
popup.style.display = "block";
}
}
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
</script>
HTML code:
<body onLoad="xpopup()"; "ypopup()";>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1<br>
Link 2<br>
CSS code:
.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%;
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}
#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7;
z-index: 9;
left: 0;
top: 0;
}

Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();"> and in your JavaScript code you have a typo.
function ypopup() {
document.getElementById("y").onclick= function(){
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block"; // Here the popup1 is undefined change it to popup.style.....
}
}
Edit :-->
I've changed your code to hide the popup, if you click on the greyed out section.
Fiddle
HTML:
<body>
<div id="overLay"></div>
<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>
Link 1
<br />
Link 2
<br />
</body>
JavaScript:
var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");
document.getElementById("x").onclick = function () {
overlay.style.display = "block";
xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
overlay.style.display = "block";
ypopup.style.display = "block";
};
overlay.onclick = function () {
overlay.style.display = "none";
xpopup.style.display = "none";
ypopup.style.display = "none";
};

I'm seeing two issues --
The first is already answered by chipChocolate.py:
Replace <body onLoad="xpopup()"; "ypopup()";> with <body onLoad="xpopup(); ypopup();">.
The second (and maybe this is just a typo?) is that you have:
function ypopup() {
document.getElementById("y").onclick= function()
var overlay = document.getElementById("overLay");
var popup = document.getElementById("yPopup");
overlay.style.display = "block";
popup1.style.display = "block";
}
}
You're referencing popup1 but you've named your variable popup. If you open up the javascript console you'll probably see that's throwing an error. Rename the variable popup1 and this should work.

Javascript, CSS: displaying a hidden div not working?

I know this is a question that's been asked a hundred times but I can't figure out why it's not working on me site.
Javascript:
<script>
function show(boxid){
document.getElementById(boxid).style.visibility="visible";
}
function hide(boxid){
document.getElementById(boxid).style.visibility="hidden";
}
</script>
HTML (PHP generated):
echo '<div id="selectedBookingActionLink">';
echo 'Cancel';
echo '</div>';
echo '<div id="cancelPopUp">';
echo '<div class="question">Cancel?</div>';
echo '<div class="answer">Yes</div>';
echo '<div class="answer">No</div>';
echo '</div>';
CSS:
#cancelPopUp
{
width: 260px;
height: 80px;
visibility: hidden;
}
As you can see, I'm trying to change the visibility property of the cancelPopUp div when the user clicks the "Cancel" link. I've done some research and found that why I'm doing should work. Yet the pop up box does not appear.

You need to use quotes when passing the ID of the div to the show function:
echo 'Cancel';

I've posted a working version of your code here → http://jsfiddle.net/matbloom/uHQsd/
First, make sure you have positioned your JS in the head of your document, above the body.
Second, don't forget to add single quotes inside the onClick.
Cancel
Third, I would suggest using the 'display' property vs 'visibility'.
Also, I've provided a simple toggle function which may work better for your application.
Hope this helps!
HTML:
<div id="selectedBookingActionLink">
Cancel
</div>
<div id="cancelPopUp" style="display:none;">
<div class="question">Cancel?</div>
<div class="answer">Yes</div>
<div class="answer">No</div>
</div>
CSS:
#cancelPopUp {
width: 260px;
height: 80px;
}
JS:
function show(boxid) {
document.getElementById(boxid).style.display = "block";
}
function hide(boxid) {
document.getElementById(boxid).style.display = "none";
}
/* Optional toggle function */
function toggle(boxid) {
var e = document.getElementById(boxid);
if (e.style.display == "block") {
e.style.display = "none";
} else {
e.style.display = "block";
}
}