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";
}
}

Move and/or drag element back and forth from div to div and capture it's div string dynamically

I'm studying this thread : How to move an element into another element?, and https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop, my problem is how do we do this back-and-forth?
This works perfectly as it is. I can drag the strings back and forth.
My goal is for it to look like this.
Move all to parent div
Move all to child div
But when I try to move it using buttons,
<button type="button" onclick="Parent()">
Move From Parent to Child
</button>
<button type="button" onclick="Child()">
Move From Child to Parent
</button>
This is the current result.
It just swaps the strings. It's supposed to merge all together, and not swap. Is there a way for this to be fixed?
Move from parent to child
Move from child to parent
How do we move the strings only from one div to another (vise-versa)?
And lastly, how do we capture span values dynamically?
I understand that this works by calling all the values inside <span>
$(document).ready(function() {
var capturevalueschild = $.map($("#child span"), function(elem, index) {
return $(elem).text();
}).join("-");
$("#displayvalueschild").text(capturevalueschild);
});
$(document).ready(function() {
var capturevaluesparent = $.map($("#parent span"), function(elem, index) {
return $(elem).text();
}).join("-");
$("#displayvaluesparent").text(capturevaluesparent );
});
But my problem is, if I'm going to change the value? It does not capture the latest string being changed.
This is what I got so far.
My Style
<style>
.div-to-drag {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
overflow: scroll;
}
#parent {
height: 100px;
width: 300px;
background: green;
margin: 0 auto;
overflow: scroll;
}
#child {
height: 100px;
width: 300px;
background: blue;
margin: 0 auto;
overflow: scroll;
}
</style>
My HTML.
<div id='parent' class='div-to-drag' ondrop='drop(event)' ondragover='allowDrop(event)'>
<?php echo "<span id='div1parent' draggable='true' ondragstart='drag(event)'>First Parent<br></span>"; ?>
<?php echo "<span id='div2parent' draggable='true' ondragstart='drag(event)'>Second Parent<br></span>"; ?>
<?php echo "<span id='div3parent' draggable='true' ondragstart='drag(event)'>Third Parent<br></span>"; ?>
</div>
<br>
<div id='child' class='div-to-drag' ondrop='drop(event)' ondragover='allowDrop(event)'>
<?php echo "<span id='div1child' draggable='true' ondragstart='drag(event)'>First Child<br></span>"; ?>
<?php echo "<span id='div2child' draggable='true' ondragstart='drag(event)'>Second Child<br></span>"; ?>
<?php echo "<span id='div3child' draggable='true' ondragstart='drag(event)'>Third Child<br></span>"; ?>
</div>
<div id="result"></div>
<br>
<div id="result"></div>
<br>
<button type="button" onclick="Parent()">
Move From Parent to Child
</button>
<button type="button" onclick="Child()">
Move From Child to Parent
</button>
My script.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function Parent() {
$("#parent").insertAfter($("#child"));
}
function Child() {
$("#child").insertAfter($("#parent"));
}
$(document).ready(function() {
var capturevalueschild = $.map($("#child span"), function(elem, index) {
return $(elem).text();
}).join("-");
$("#displayvalueschild").text(capturevalueschild);
});
$(document).ready(function() {
var capturevaluesparent = $.map($("#parent span"), function(elem, index) {
return $(elem).text();
}).join("-");
$("#displayvaluesparent").text(capturevaluesparent );
});
</script>
To summarize, what I'm trying to achieve here are the following:
Enable transferring all the string from 1 div to another, just append it, and vise versa.
Dynamically capture data from "parent" div and "child" div, depending on what the data is being stored, transferred there.
Capture the data from "parent" div and convert it into an array so that I can insert it into my database.
Thank you so much in advance.

So if i've understood correctly you wish to move all the elements to either child or parent div, not just swapping the elements.
What you can do is to append the elements. the insertAfter puts the element after the div, just as you did with the drop element. I've Chosen to loop through the id's on the elements that was to be moved by the click event, and then append these to the parent or child DIV element. I have changed the ID's for semantic reason in for coding the loop. This should solve your problem.
function Parent() {
for (var i = 1; i <= 3; i++) {
$("#parent").append($("#parentElement" + i));
$("#parent").append($("#childElement" + i));
}
}
function Child() {
for (var i = 1; i <= 3; i++) {
$('#child').append($("#parentElement" + i));
$("#child").append($("#childElement" + i));
}
}
Also, I see no reason using the php tags and echo for the span elements, works fine without it :)

PHP Call JS function

I am trying make some div for message when is showing just when i call him.
I need to call javascript to change div style (style="display:block;") but i don't know how.
I try call with echo, but now work.
I am try add in HTML file <script type="text/javascript">openmsgpF();</script> and that not work too.
Some other way how can i call javascript funtion?
MY PHP FILE:
if (isset($_POST['newsletter'])){
$message='Thanks for signig up on our newsletter!';
echo '<script type="text/javascript">openmsgpF();</script>';
}
MY MESSAGE DIV:
<div id="message-p" style="display:none;background-color: green;color: rgb(255, 255, 255);text-align: center;position: fixed;top: 0px;left: 0px;z-index: 999999;width: 100%; font-size: 25px; font-style: normal;letter-spacing: 1px;height: 100px;padding-top: 30px;letter-spacing: 1px;">
<?php echo $message;?>
<div id="close_msg" style="position: absolute;top: 0;right: 10px;">
<a style="color: #c6c6c6;" href="javascript:void(0);" onclick="closemsgF()">X</a>
</div>
</div>
MY SCRIPT:
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
</script>

You have an issue with the order in which your javascript is loading.
I presume you are echoing
<script type="text/javascript">openmsgpF();</script>
before you have printed your HTML. In that scenario, the elements are not yet on the page.
Try outputting your code with this order:
<?php
$message = '';
if (isset($_POST['newsletter'])){
$message='Thanks for signig up on our newsletter!';
}
?>
<div id="message-p" style="display:none;background-color: green;color: rgb(255, 255, 255);text-align: center;position: fixed;top: 0px;left: 0px;z-index: 999999;width: 100%; font-size: 25px; font-style: normal;letter-spacing: 1px;height: 100px;padding-top: 30px;letter-spacing: 1px;">
<?php echo $message;?>
<div id="close_msg" style="position: absolute;top: 0;right: 10px;">
<a style="color: #c6c6c6;" href="javascript:void(0);" onclick="closemsgF()">X</a>
</div>
</div>
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
</script>
<?php
if (isset($_POST['newsletter'])){
echo '<script type="text/javascript">openmsgpF();</script>';
}
?>
https://jsfiddle.net/de6ha4nf/

Besides of putting the script tag before the end of the body tag add the call to openmsgpf inside the window.onload() event for it to trigger when the page finishes loading.
To display conditionally you surround the function with an if statement.
can be to check if the html in the message div is empty, or to check if you have included (from the php code) a specific css class or attribute in the message div. There are many ways.
<script>
function closemsgF()
{
document.getElementById("message-p").style.display = "none";
document.getElementById("message-n").style.display = "none";
}
function openmsgpF()
{
document.getElementById("message-p").style.display = "block";
}
function openmsgnF()
{
document.getElementById("message-n").style.display = "block";
}
window.onload(function(){
var showMessage = <whatever condition you evaluate>;
if(true === showMessage){
openmsgpF();
}
});
</script>

Javascript onclick needs 2 clicks

Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html
function showhide() {
var div = document.getElementsByClassName('search_form')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide2() {
var div = document.getElementsByClassName('login')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
function showhide3() {
var div = document.getElementsByClassName('carrello')[0];
if (div.style.display == "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
.search_form {
display: none;
float: right;
}
.login {
display: none;
float: right;
}
.carrello {
display: none;
float: right;
}
<div class="login-carrello">
<img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px"> &nbsp &nbsp
<img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
<img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px">
</div>
are both in a single PHP page.Thanks in advance.

The problem is in JavaScript code. Since display property was initially set in css, div.style.display won't give you none. So, you have to change your code a little bit. Like this:
if(div.style.display != "block")
div.style.display = "block";
else
div.style.display = "none";
Once you set the display property using JavaScript code, you can read it using JavaScript.

Because the display property is not actually set (although it is applied through CSS), it's initial value is empty (and thus not equal to 'none' ).
If checked in the reverse order, it would work, but perhaps safer is to use an extra class (with the display property) you toggle instead.
A minimized example:
function showhide(cn) {
var div = document.getElementsByClassName(cn)[0];
div.classList.toggle('show');
}
.login-carrello >img{
width:50px;
height: 50px;
}
.search_form,.login, .carrello {
float: right;
display: none;
}
.show{
display:block;
}
<div class="login-carrello">
<img src="/wp-content/themes/kyro/img/search.png" onClick="showhide('search_form')">
<img src="img.png" onClick="showhide('login')">
<img src="imgt.png" onClick="showhide('carrello')">
</div>
<div class="search_form">search_form</div>
<div class="login">login</div>
<div class="carrello">carrello</div>
The start setting for .search_form,.login, .carrello is display:none, but adding .show overrides that. (I've also taken the liberty of parameterizing the classname to show/hide so only a single function is needed. With late binding it could be automated further, but this stays pretty close to the original)

Not sure if you're looking for a double click, or just two seperate clicks. However if a double click would satisfy your functionality requirement, you could try something like the following:
<img src="img.png" ondblclick="showhide2()" onmouseover="this.src='img.png'" mouseout="this.src='img.png'" width="50px" height="50px">

how to filter by hiding/showing divs with dynamic attributes?

Suppose I have checkboxes x, y, z and <div> elements with corresponding id attributes.
I have products in groups of x, y, z and the groups have classes. But the clearfix class is for all the products in different locations (because I loop through products) so I should recognize the difference with id and other things.
If a checkbox has been checked it should show the related div (if x, show <div id='x'>). If not it should not show them. If x, and y are checked, show x, y and hide z.
So it should work with multiple ones. Here are my divs and styles of clearfix that caused the problem:
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
display: block;
}
.clearfix:after{
display: block;
content: ".";
clear: both;
font-size: 0;
line-height: 0;
height: 0;
overflow:hidden;
}
<div class="reltitles" id="<?php echo $array[$key][0]; ?>" style="<?php if($array[$key][1]==0){?> display:none;<?php }else {?>display:block;<?php }?>">
<font class="resultHeader">
(<?php echo $array[$key][1];?>) <?php echo $array[$key][0]; ?>
</font>
</div>
<div class="clearfix" value="<?php echo $array[$key][0];?>" name="<?php echo $array[$key][0];?>" id="<?php echo $array[$key][0];?>">
<?php //code for showing items
Following are the scripts that failed to hide the clear fix:
$(document).ready(function(){
$('input[type="checkbox"]').click(function () {
var variable = $(this);
$(".clearfix").each(function () {
if( $(this).attr("value") != variable.val() ) {
var id = $(this).attr("value");
var x = document.getElementById(id);
if ( x.style.display == "block" ) {
x.style.display = "none";
} else {
x.style.display = "block";
}
$(this).hide();
}
});
});
});
The first time it should show all of the items and then if user ties to filter them start the operation.

Why not add the following attribute to your checkboxs data-target='div#'
Then assign your divs ID the same value.
then with js:
$(document).on('click', '.checkboxs', function() {
var t = $(this).attr('data-target');
if(t != undefined) {
//check if its already shown, if so hide!
if($(this).attr('data-isshown')) {
$("#"+t).hide();
$(this).removeAttr('data-isshown')
} else {
$("#"+t).show();
$(this).attr("data-isshown", true);
}
}
});

finally I figured it out, I loop through all checkboxes and all divs
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var numberOfChecked = $('input:checkbox:checked').length;
$(".clearfix").each(function(){
var clear=$(this);
$('input[type="checkbox"]').each(function(){
var variable=$(this);
var flag=$(this).prop('checked');
var id=$(this).val();
if(flag)
{
if(clear.attr("value")==variable.val())
{
var id=clear.attr("value");
var x=document.getElementById(id);
x.style.display="block";
clear.css('display','block');
}
}
else if(clear.attr("value")==variable.val())
{ var id=clear.attr("value");
var x=document.getElementById(id);
x.style.display="none";
clear.css('display','none');
}
if(!numberOfChecked)
{
var id=clear.attr("value");
var x=document.getElementById(id);
x.style.display="block";
clear.css('display','block');
}
}); //clear
});//all checkboxes
}); //click
});//ready

Please forgive me if I misunderstood your question, but you can accomplish this with CSS alone using the general sibling combinator:
<input type="checkbox" class="box_a" />
<input type="checkbox" class="box_b" />
<div class="box" id="a">This is a box.</div>
<div class="box" id="b">This is b box.</div>
.box {
display: none;
}
.box_a:checked ~ #a,
.box_b:checked ~ #b {
display: block;
}
Demo: http://jsfiddle.net/jonathansampson/dXKLL/
If you're not able to control the id values, you could base the connection on nth-of-type:
.check:nth-of-type(1):checked ~ .box:nth-of-type(1),
.check:nth-of-type(2):checked ~ .box:nth-of-type(2) {
display: block;
}
Demo: http://jsfiddle.net/jonathansampson/dXKLL/1/
If you need everything to be visible when no checkboxes are checked, you could use both the next sibling selector along with the general sibling selector:
.check:not(:checked) + .check:not(:checked) ~ .box {
display: block;
}
This will show all .box elements that follow at least two unchecked .check elements.
Demo: http://jsfiddle.net/jonathansampson/dXKLL/2/