Develop Reference

My js function to hide and show isn't working on mobile

I've got some basic javascript that isn't working on mobile devices, but works for all other device types.
I've got a section with a burger menu in it, and an article below that with content that's supposed to be hidden, then shown when the user clicks the burger menu:
<section id="nav">
<a href="#modal-menu" id="modal-opener">
<span id="b1" class="burger"></span>
<span id="b2" class="burger"></span>
<span id="b3" class="burger"></span>
</a>
<article id="modal-menu">
<h1>Heading 1</h1>
x
</article>
</section>
Then this js hides the article and shows it on click;
function whatevsd(){
document.getElementById("modal-menu").style.display = "none";
document.getElementById("modal-opener").addEventListener("click", function(){
document.getElementById("modal-menu").style.display = "block";
});
}
whatevsd();
I even tried adding touchstart, as in:
function whatevsd(){
document.getElementById("modal-menu").style.display = "none";
document.getElementById("modal-opener").addEventListener("touchstart", function(){
document.getElementById("modal_menu").style.display = "block";
});
}
whatevsd();
But that didn't change anything. Any ideas?
Edit:
Snippet on request:
function whatevsd(){
document.getElementById("modal-menu").style.display = "none";
document.getElementById("modal-opener").addEventListener("click", function(){
document.getElementById("modal-menu").style.display = "block";
});
}
whatevsd();
function whatevsd(){
document.getElementById("modal-menu").style.display = "none";
document.getElementById("modal-opener").addEventListener("touchstart", function(){
document.getElementById("modal-menu").style.display = "block";
});
}
whatevsd();
#modal-opener{
height: 50px;
width: 50px;
display: block;
background: green;
z-index: 99;
}
#modal-menu{
height: 50px;
width: 50px;
display: block;
background: orange;
margin-top: 100px;
}
<section id="nav">
<a href="#modal-menu" id="modal-opener">
<span id="b1" class="burger"></span>
<span id="b2" class="burger"></span>
<span id="b3" class="burger"></span>
</a>
<article id="modal-menu">
<h1>Heading 1</h1>
x
</article>
</section>

TicTacToe - trouble alternating players

First mouse click gives me the expected 'x' marker but the next mouse click results in the alert ("Player o: tile has already been selected) even though the grid-item is blank. What am I doing wrong?
In the HTML body, I have created a 3x3 grid, 9 gridItems in total.
$(document).ready(function(){
let grid = $("#grid-container")
let gridItem = $(".grid-item")
function select(){
for (i = 0; i < gridItem.length; i++){
gridItem[i].addEventListener("click", function(){
if ($(this).html() == ""){
$(this).html("x");
nextSelect();
} else {alert ("Player X: tile has already been selected"); select()}
})
}
}
function nextSelect(){
for (i = 0; i < gridItem.length; i++){
gridItem[i].addEventListener("click", function(){
if ($(this).html() == ""){
$(this).html("o");
select();
} else {alert ("Player o: tile has already been selected"); nextSelect()}
})
}
}
select()
});

The addEventListener should be executed only once. Your problem is that you're adding multiple event handlers. A possible version in the snippet bellow.
The idea is that you only need one function and attach it to click event only once per cell, which is done with jQuery .click(callback). To manage the turns you can use a boolean variable (isTurnOfPlayerOne).
$(document).ready(function() {
let isTurnOfPlayerOne = true;
$(".grid-item").click(handleClick);
function handleClick() {
if ($(this).html() == " ") {
let symbol = (isTurnOfPlayerOne ? "x" : "o");
$(this).html(symbol);
} else {
alert("Tile has already been selected");
}
isTurnOfPlayerOne = !isTurnOfPlayerOne;
}
});
.grid-item {
width: 40px;
height: 40px;
display: inline-block;
border: solid 1px #000;
text-align: center;
margin-bottom: 3px;
line-height: 30px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid-container">
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<br/>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<br/>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>

javascript style.display only work with css inline [duplicate]

This question already has answers here:
How to retrieve the display property of a DOM element?
(4 answers)
Closed 6 years ago.
I do not understand this behavior.
If I set style "display:none" inline works properly when I click on ChangeDiv1 button.
If I set style "display:none" in header tag when I click on ChangeDiv2 button document.getElementById("conten2").style.display is empty.
If I do not set style "display:none" when I click on ChangeDiv3 button document.getElementById("conten3").style.display is empty.
How can I solve this?
function cambiar1() {
var miElemento1 = document.getElementById("conten1").style.display;
if (miElemento1 == "block") document.getElementById("conten1").style.display = "none";
if (miElemento1 == "none") document.getElementById("conten1").style.display = "block";
document.getElementById('estadoconten1').innerHTML = 'State Div1:' + document.getElementById("conten1").style.display;
}
function cambiar2() {
var miElemento2 = document.getElementById("conten2").style.display;
if (miElemento2 == "block") document.getElementById("conten2").style.display = "none";
if (miElemento2 == "none") document.getElementById("conten2").style.display = "block";
document.getElementById('estadoconten2').innerHTML = 'State Div2:' + document.getElementById("conten2").style.display;
}
function cambiar3() {
var miElemento3 = document.getElementById("conten3").style.display;
if (miElemento3 == "block") document.getElementById("conten3").style.display = "none";
if (miElemento3 == "none") document.getElementById("conten3").style.display = "block";
document.getElementById('estadoconten3').innerHTML = 'State Div3:' + document.getElementById("conten3").style.display;
}
#estadoconten1 {border:solid 1px red}
#conten2 {display:none; border:solid 1px green}
#conten3 {border:solid 1px blue}
<h2>
MODIFY "LOAD TYPE" AT JAVASCRIPT MENU AND SET "IN HEAD" OPTION
</h2>
<button type="button" onclick="cambiar1()">ChangeDiv1</button>
<button type="button" onclick="cambiar2()">ChangeDiv2</button>
<button type="button" onclick="cambiar3()">ChangeDiv3</button>
<div id='estadoconten1'></div>
<div id='estadoconten2'></div>
<div id='estadoconten3'></div>
<br>
<div id='conten1' style='display:none'>
I am Div 1
</div>
<br>
<div id='conten2'>
I am Div 2
</div>
<br>
<div id='conten3'>
I am Div 3
</div>
Example jsfiddle

You check if an elememt has display: block or none. However there are many others like initial, inline,outline ... . thats why your js doesnt work.
Explicitly set it to your css:
#conten1,#conten2,#conten3{
display:block;
}
Or change your js
if(element.style.display=="none"){
//element is hidden
//display
}else{
//elememt is not hidden
//hide
}

You can toggle anything other than "none" to "none". You can toggle "none" to "block".
function cambiar(idx) {
var el = document.getElementById("conten" + idx);
var miElemento = el.style.display;
if (miElemento === "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
document.getElementById('estadoconten' + idx).innerHTML = 'State Div' + idx + ':' + el.style.display;
}
#estadoconten1 {
border: solid 1px red
}
#conten2 {
display: none;
border: solid 1px green
}
#conten3 {
border: solid 1px blue
}
<button type="button" onclick="cambiar(1)">ChangeDiv1</button>
<button type="button" onclick="cambiar(2)">ChangeDiv2</button>
<button type="button" onclick="cambiar(3)">ChangeDiv3</button>
<div id='estadoconten1'></div>
<div id='estadoconten2'></div>
<div id='estadoconten3'></div>
<br>
<div id='conten1' style='display:none'>
I am Div 1
</div>
<br>
<div id='conten2'>
I am Div 2
</div>
<br>
<div id='conten3'>
I am Div 3
</div>

display is not part of the element unless is has specifically been set.
see this answer.
document.getElementById(...).style.display is blank

Change Icon on click and add a css class through javascript

I'm trying to make a expandable h3. For that I'll have a "plus" image to click and when it's clicked has to change to a "minus" image and I need to add a css class to the h3 to show the content. I'll paste all the code below:
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br /> [Posts] [Pager]
</div>
<div style="clear: both"></div>
And here is the javascript:
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
element.src = element.bln ? right : left;
element.bln = !element.bln;
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});

you can use .attr function of jquery to set image source like
$('.img-selector').attr('src','plusorminusimagepath.jpg');
and you can have a boolean flag to know if it is less or more

Here i was changing alt attribute of image tag on click. the same way you can change src
jQuery(document).ready(function() {
$("#ExpandBlogDescriptionImg").click(function() {
if ($(this).attr("alt") == "+") {
$(this).attr("alt", "-");
} else {
$(this).attr("alt", "+");
}
});
var img = $("#ExpandBlogDescriptionImg");
if (img.src = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png") {
$('.blogdescription').addClass("ExpandBlogDescriptionText");
} else {
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default">
[ManageBlog]
<div class="msearch-result" id="LBSearchResult[moduleid]" style="display: none">
</div>
<div class="head">
<h1 class="blogname">
[BlogName] <img alt="+" src="/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png" alt="Plus Button" id="ExpandBlogDescriptionImg"></h1> [RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3> [Author]
</div>
<br />[Posts] [Pager]
</div>
<div style="clear: both"></div>

You should use a sprite image and CSS, else when you click and it will load another image, for some time between image would disappear.
HTML
<div class="head">
<h1 class="blogname">
[BlogName] <span class="plus icon"></span></h1>
[RssFeeds]
<br style="line-height: 12px; clear: both" />
<h3 class="blogdescription">
[BlogDescription]</h3>
[Author]</div>
<br />
CSS
.icon{
width:30px;
height:30px;
display:inline-block;
background-image:url(plus-minus-sprite-image.png);
}
.icon.plus{
background-position:20px center;
}
.icon.minus{
background-position:40px center;
}
JS
$('.icon').click(function(){
$(this).toggleClass("plus minus");
if($(this).hasClass("plus")){
$('.blogdescription').addClass("ExpandBlogDescriptionText");
}else{
$('.blogdescription').removeClass("ExpandBlogDescriptionText");
}
// Or $('.blogdescription').toggleClass("ExpandBlogDescriptionText");
});

$("#ExpandBlogDescriptionImg").click( function(e){
var right = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/plus_symbol.png";
var left = "https://train.fitness/portals/40/Images/Train_Fitness_2015_S/images/minus_symbol.png";
if($(e.currentTarget).attr('img') == left){
$(this).hide();
$(e.currentTarget).attr('img',right);
}else{
$(this).show();
$(e.currentTarget).attr('img',left);
}
});

Javascript Showing div function

<script language="javascript">
function switchdiv() {
var e = document.getElementById().id;
if(e == 'Streambtn')
document.getElementById('Stream').style.display = "block";
else
document.getElementById('Stream').style.display = "none";
}
</script>
Hello,
Here is my problem. When I click, nothing happen...
I hope you can help me.
Thank you
Edit :
Thank you for your answer zzlalani but it unfortunately does not work.
Here is the final code, hoping you'll help me to find a way to fix the problem.
<div align="center">
<input type="button" class="btn" name="Stream" value="Stream" style="padding: 10px 20px 10px 20px; border: 0px; font-family: Play, sans-serif; font-weight: bold" onClick="switchdiv("Streambtn")"/>
<input type="button" class="btn" name="Youtube" value="Youtube" style="padding: 10px 20px 10px 20px; border: 0px; font-family: Play, sans-serif; font-weight: bold" onClick="switchdiv("Youtubebtn")"/>
<input type="button" class="btn" name="LoL" value="League Of Legends" style="padding: 10px 20px 10px 20px; border: 0px; font-family: Play, sans-serif; font-weight: bold" onClick="switchdiv("LoLbtn")"/>
</div>
<script language="javascript">
function switchdiv(e) {
if(e == 'Streambtn')
document.getElementById('Stream').style.display = "block";
else
document.getElementById('Stream').style.display = "none";
}
if(e == 'Youtubebtn')
document.getElementById('Youtube').style.display = "block";
else
document.getElementById('Youtube').style.display = "none";
}
if(e == 'LoLbtn')
document.getElementById('LoL').style.display = "block";
else
document.getElementById('LoL').style.display = "none";
}
</script>
<div align="center" id="Stream" hidden>
<p>a</p>
</div>
<div align="center" id="Youtube" hidden>
<p>b</p>
</div>
<div align="center" id="LoL" hidden>
<p>c</p>
</div>

Let say you have button that calls switchdiv on click
<input type='button' onClick='switchdiv("Streambtn");' value='Stream!'>
<input type='button' onClick='switchdiv("nonStreambtn");' value='Non Stream!'>
Then it will goes like this
<script language="javascript">
function switchdiv(e) {
if(e == 'Streambtn')
document.getElementById('Stream').style.display = "block";
else
document.getElementById('Stream').style.display = "none";
}
</script>
The problem in you code is you are getting the value of nothing.. check it in this way
var e = document.getElementById().id;
console.log(e);
in the console of the browser you can see that will be either show some weird errors in red