I trying to have a button that shows and hidden my image - javascript

<!DOCTYPE html>
<html>
<head>
<title>Face</title>
<meta charset="UTF-8">
<script type="text/javascript">
//<![CDATA[
function myFunction(id) {
var e = document.getElementById(id);
if(e.style.visibility == "visible")
e.style.visibility = 'hidden';
else
e.style.visibility = 'visibile';
}
</script>
</head>
<body>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
<button onclick="myFunction('Pum')">Face</button>
</div>
</body>
</html>
I trying to have a button that shows/hidden my image. I don't understand what I am doing wrong . I am getting an error that says "TypeError: Cannot read property 'visibility' of null". How do I fix my error and make my program work ?

Your problem is a typo in the code
function myFunction(id) {
var e = document.getElementById(id);
if(e.style.visibility == "visible")
e.style.visibility = 'hidden';
else
e.style.visibility = 'visible'; // <-------- SHOULD BE 'visible', was 'visibile'
}
This should fix your problem.

Related

Toggle style.display for <p> in javascript button not working

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>

Toggle button : Javascript toggle doesn't works locally

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>

Show Hide using style not working

Can someone please explain to me why this plain-jane web page does NOT do what it is supposed to do, that is to say, change the style from display:none; to display:block; ??
thanks!
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null)
{
if (Selem.style.display == "none")
Selem.style.display = "block;"
else
Selem.style.display = "none;"
}
}
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
You are placing the ";" inside the quotations for "block;" and "none;".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
<script type="text/javascript">
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null) {
if (Selem.style.display === "none") {
Selem.style.display = "block";
} else {
Selem.style.display = "none";
}
}
}
</script>
</body>
</html>

Jquery Need Help - Changing content when clicking on a link

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>

Javascript Running on JSFiddle but not on a webpage

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.

Categories