I try to create a toggle button in order to show/hide some content. For the moment, I use that :
// test.js
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});
#content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
</body>
</html>
If I use these code with codepen or JSFiddle, all works fine, but when I try it locally, ( when I click on my index.html file, open it with firefox or an other browser ) my button "Click Me" doesn't works.
When I click on it, nothing happens...
Someone to show me why ?
You could make your function to be fired on load event.
Possible example
(function() {
var loadedContent = {
init: function() {
window.addEventListener("load", function(event) {
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ?
"block" :
"none";
});
});
}
};
loadedContent.init();
})();
#content {
display: none;
}
<button id="toggle">Click Me</button>
<div id="content">Hello World</div>
Related
I am trying to make a button on my page that toggles between the style.display of a paragraph.
This is because i want it to only show up when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Oscar Li</title>
<h1>Oscar Li</h1>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p2 id="abMe">"this is my text"</p2>
<p><button2 type="button" onclick= "myFunction" >About me</button></p>
</body>
</html>
Javascript
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display;
if (displaySettings === "none") {
displaySettings = "inline-block";
} else {
displaySettings = "none";
}
}
css
p2{
position: relative;
display: none;
}
Only toggles the paragraph to hide but doesnt toggle it back on to show
Step 1: Don't just make up tags like p1 and p2. While HTML is vary forgiving you can't just add these new tags without defining their behavior. If you are going to use custom elements make sure to close them with the same tag, eg <p1></p1>
Step 2: Use CSS to adjust styling and javascript to toggle the css.
/*The modern way to assign a click handler*/
document.querySelector("#toggle").addEventListener("click", myFunction);
function myFunction() {
/*Get the element*/
var x = document.getElementById("abMe");
/*Toggle the show class*/
x.classList.toggle("show");
}
#abMe {
position: relative;
}
/*Hide element without the show class*/
#abMe:not(.show) {
display: none;
}
<p>Junior Developer</p>
<p id="abMe">"this is my text"</p>
<p><button type="button" id="toggle">About me</button></p>
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<title>Oscar Li</title>
<h1>Oscar Li</h1>
<style>
#abMe {
display: none;
}
</style>
</head>
<body>
<p1>Junior Developer</p>
<!--creates the cube-->
<script type="text/javascript" src="/javascript/myFunction.js"></script>
<p id="abMe">"this is my text"</p>
<button type="button" onclick="myFunction()">About me</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("abMe");
var displaySettings = x.style.display
if (displaySettings === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</html>
I am trying to hide a button when the mouse is not moving. That's all. I have found a solution on here but it references a Google javascript file (links directly to a javascript file on one of their hosting drives) and I would like my website to not be dependent on anything else -- I would like it to be stand-alone.
Please help!
<html>
<head>
<script type="text/javascript">>
function change( el )
{
if ( el.value === "Display Menu" )
el.value = "Hide Menu";
else
el.value = "Display Menu";
}
</script>
</head>
<body>
<input type="button" value="Display Menu" onclick="return change(this);" />
</body>
</html>
I believe the solution you found had a jQuery part which you didn't want.
This would do, as it's pure native javascript.
var el = document.getElementById("btnMenu");
var timer;
function showBtn(){
el.style.display = "block";
}
function hideBtn(){
el.style.display = "none";
}
hideBtn();
document.onmousemove = function(){
showBtn();
clearTimeout(timer);
timer = setTimeout(function(){
hideBtn();
},100)
}
<body>
<input id="btnMenu" type="button" value="Display Menu"/>
</body>
This hides the button after 300ms of the mouse not moving, which is enough time to not have it flash (hiding and showing every few ms).
Best to give the button an id if possible for clarity and ease of selection.
Set the CSS for the button to display:none;
Button starts hidden, on move, it is set to show(), then the timer is ready to hide it again in 300 ms if no movement is detected. If movement is detected, the timer is reset.
var timer;
$(document ).mousemove(function(){
$("#mouseDrivenButton" ).show();
clearTimeout(timer);
timer = setTimeout(function(){
$("#mouseDrivenButton" ).hide();
},300)
});
#mouseDrivenButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mouseDrivenButton">Mouse Is Moving</button>
THIS ONE IS PURE JAVASCRIPT FOR YOU and requires no external scripts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mouseDrivenButton {
display: none;
}
</style>
<script>
var timer;
document.onmousemove = function() {
document.getElementById('mouseDrivenButton').style.display = "block";
clearTimeout(timer);
timer = setTimeout(function() {
document.getElementById('mouseDrivenButton').style.display = "none";
}, 300)
};
</script>
</head>
<body>
<button id="mouseDrivenButton">Mouse Is Moving</button>
</body>
</html>
I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!
$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo
I need help. I'm trying to get a link to change the displayed answer when you click on the link. I want it to toggle back and forth each time you click on it. I've been playing around with multiple items but nothing seems to work yet. I've commented out some notes to help sort out what I want to do. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'block';
//get the first div into this variable
//var firstDiv = document.getElementById('first');
firstDiv.style
//change it's style/display properties from none to block. Is it visible now when you click the link?
//firstDiv.
}
</script>
</HEAD>
<BODY>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
It's good practice to move javascript out of your HTML.
Here is an example of toggling the CSS Display property in javascript.
Fiddle: http://jsfiddle.net/LdPfS/
var link = document.querySelector("#home > a")
link.addEventListener("click", function(e) {
e.preventDefault()
var firstDiv = document.getElementById('first'),
secondDiv = document.getElementById('second'),
toggle = firstDiv.style.display === "none" ? "block" : "none"
/* toggle = firstDiv.style.display === "none" ? "block" : "none"
* Read as
* if ( firstDiv.style.display === "none" ) {
* toggle = "block"
* else {
* toggle = "none"
* }
*/
firstDiv.style.display = toggle
secondDiv.style.display = toggle
})
I agree that the all caps html is weird but for the sake of making this quick, I'll copy/paste your code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script src="jquery.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
function flipSwitch(){
// first and foremost, you're using jQuery so let's use jquery
if ($('#first').is(':hidden')) {
$('#first').show();
$('#second').hide();
} else {
$('#first').hide();
$('#second').show();
}
}
// next, let's get your javascript OUT of the html
$(document).ready(function () {
// when the document has loaded, attach our function as a
// click handler to the link
$('#my_switch').on('click', flipSwitch);
});
</script>
</HEAD>
<BODY>
<div id="home">
<a id="my_switch">Let's see if we can get this to work?</a>
</div>
<div id="first" style="DISPLAY: none;">This is a test...</div>
<div id="second" style="DISPLAY: none;">of the emergency broadcast system</div>
</BODY>
Similar to MBottens, but with some simple JQuery:
$('#home > a').on('click', function(e) {
e.preventDefault()
$('#first').toggle();
$('#second').toggle();
});
Try this logic. Take a global variable and set its value to 1.
<script type="text/javascript">
var countClick=1;
function flipSwitch(){
if(countClick%2==0){
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
}
else{
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';
}
countClick++;
}
</script>
Also please change your html with the following html:
<body>
<div id="home">
Let's see if we can get this to work?
</div>
<div id="first" style="display: none;">This is a test...</div>
<div id="second" style="display: none;">of the emergency broadcast system</div>
</body>
Ok so I have a code that would show different forms based on dropdown selection
Here's the fiddle to that..
Well its always giving me Test1 which means its not changing the div display, it's working on JSFiddle but not on the webpage..
and here's my webpage markup
<html>
<body>
<style>
.hidden {
display: none;
}
</style>
<script type='text/javascript'>
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
</script>
<select name="options" id="options">
<option value="1"> Display </option>
<option value="2">Wka</option>
</select>
<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>
</body>
</html>
That is because in the fiddle your code is set to run at onLoad, but in your code its running before the DOM is created.
Wrap your code into a window.onload event like this:
window.onload = function()
{
document.getElementById('options').onchange = function() {
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
};
Anyway, like #positivew remembered, your code misses the <head> tag. Is semantically correct to put your JS scripts inside it.
The best thing to do when such problem comes works in jsfiddle and not on webpage is to see the source of the fiddle page.
Your source of the fiddle appears as:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.hidden
{
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.getElementById('options').onchange = function()
{
var i = 1;
var myDiv = document.getElementById(i);
while(myDiv)
{
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}//]]>
</script>
</head>
<body>
<select name="options" id="options">
<option value="1"> Test1 </option>
<option value="2">Test2</option>
</select>
<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>
</body>
</html>
Paste the above code directly and it will work.
After pasting the code directly then you can remove unncecessary lines like below from the fiddle:
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
You need a onload function so your code is run after your HTML is loaded. Try this:
window.onload = function () {
document.getElementById('options').onchange = function () {
var i = 1;
var myDiv = document.getElementById(i);
while (myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}
You can also add the code after all your HTML, before the end of the body tag.
And note that in your post you are missing <head> tags.
You seem to be missing <head> tags.
Jsfiddle is running your script .onload of the window object, without you realizing it. This allows your script to pause on execution until the DOM is ready to be manipulated.
To have it work in your own environment, you can:
Place the entire script after the HTML you're trying to manipulate (e.g. end of the <body>)
Leave your code above the <body> and run it onload of the window object, e.g.
window.onload = function () {
document.getElementById('options').onchange = function () {
var i = 1;
var myDiv = document.getElementById(i);
while (myDiv) {
myDiv.style.display = 'none';
myDiv = document.getElementById(++i);
}
document.getElementById(this.value).style.display = 'block';
};
}
The page is loaded into the DOM from the top down.
Your document.getElementById('options').onchange is being called before the element with id options exists in the DOM.
If you put your script below the divs, it'll work because the divs are now there before the script is called.