Display content that was initially hidden onload - javascript

resultTable is initially hidden. When play button is clicked, the game will run and it will display the finalscore inside the hidden content. I need a function to display the finalscore. Currently the showResult function I have is not working (obviously)
I deleted unnecessary contents because the whole thing is a little big and messy. Hope the code still makes sense.
<body onload="loadGame()">
<div>
<button onclick="playButton()" id="play">Play</button>
</div>
<div id="resultTable" >
<span id="result"></p>
</div>
<script>
function loadGame(){
var hideResult = document.getElementById("resultTable");
hideResult.style.display = "none";
}
function playButton(){
playGame();
showResult();
}
function playGame(){
/*Some code here*/
document.getElementbyId("result").innerHTML = "finalscore";
}
function showResult(){
var show = document.getElementById("resultTable"); //fixed.
show.style.display = "block";
}
</script>
</body>

Change the way you are finding the element to set its display as block or none. You are using the "getElementsByClassName" method, but there is no element with such classname in the DOM.
Moreover, the "getElementsByClassName" will return you an array of all the elements, if found, in the DOM and you have to loop through the array to access it.
function showResult(){
document.getElementById("resultTable").style.display = "block";
}

Related

How to make button appear when dropdown option is clicked?

document.getElementById("SameDifferent").addEventListener('click',function () {
start(game.SameDifferent);
document.getElementById("instructions").innerHTML = "Press S for 'same' and D for 'different'";
} );
So right now, when I click toggle the function to start the game, I have instructions appear by changing the innerHTML in my html file. I want two buttons to pop up instead, however, that say "Same" and "Different". I'm almost a complete beginner at HTML/Javascript, so not sure how to do this. I can make the button appear constantly, but I am confused on how to toggle it in the js file.
Any help would be appreciated. Thanks!
You can try to set the button to hidden like below:
document.getElementById("button1").style.display = "none";
To show:
document.getElementById("button1").style.display = "";
Hi consider this HTML:
<button onclick="toggle()">Click Me</button>
<div id="tggle">
This is my DIV element.
</div>
It displays a button (toogle), that shows the div with ID tggle, here's the javascript to toggle it:
function toggle() {
var x = document.getElementById("tggle");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

How to toggle <p> once you click on <button> for second time?

function testFunction(){
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}
<p id= "test"> **I would like to hide this once user clicks on button for a second time!!** </p>
<button type= "button" onclick="testFunction()"> Click Here! </button>
I am wondering how I hide the paragraph once a user clicks on the button a second time? When user clicks on button the first time, javascript is enabled and the code is shown, but then paragraph stays on the screen even after user clicks for a second time on button. Is there some way I can hide what is displayed if user clicks on button for a second time?
<p id= "test"> **I would like to hide this once user clicks on button for a second time!!** </p>
<script>
function testFunction(){
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}
</script>
<button type= "button" onclick="testFunction()"> Click Here! </button>
First of all, I don't think that you should alter the style of elements trough js, that is what css is for (exceptions exist obviously). You could however alter the state of an element, and have your css react to that. I find it keeps your code a lot easier to maintain, and you know automatically where to look for what when you need to change something.
Have a look at the fiddle I prepared: http://jsfiddle.net/7xy39ufz/1/
So I added a state to your markup (I went for a data attribute, but a class or something could do as well)
<p id="test" data-visible="0">...</p>
<button type="button" id="button">...</button>
Then in the css I added a few lines that would react to the state:
p {
font-size: 50px;
color: blue;
}
p[data-visible="0"] {
display: none;
}
p[data-visible="1"] {
display: block;
}
And with all that done the javascript becomes very simple
document
.getElementById('button')
.addEventListener('click', testFunction, false);
function testFunction(){
var x = document.getElementById("test");
x.dataset.visible = x.dataset.visible == 0 ? 1 : 0;
}
Note that I moved the binding of the click event to js as well, in part because I couldn't get it to work in the fiddle (a scope / sandbox issue i guess), but mainly because I find js belongs with js, not in your markup.
Update
The real 'magic' is indeed being done in this line:
x.dataset.visible = x.dataset.visible == 0 ? 1 : 0;
This is basically a short hand for
if (x.dataset.visible == 0) {
x.dataset.visible = 1;
} else {
x.dataset.visible = 0;
}
(look up 'ternary' if you want to learn more about the syntax)
This code switches the data-visible attribute of you p between 1 and 0. The css reacts to that by setting the display property of that paragraph (that is what the attribute selector [data-visible="..."] is for).
I hope this clarifies things for you. Feel free to ask if you want me to explain further.
<script>
function testFunction(){
if (x.style.fontSize == "40px"){ //you could use another condition, or a global var here
document.getElementById("test").style.display="none";
}
else{
var x = document.getElementById("test");
x.style.fontSize = "40px";
x.style.color = "blue";
}
}
</script>

Spinning circle on click

I have a code where onclick a word on left side of the page, it shows some text on right hand side of page. Here's the jsfiddle of working code.
Now, my problem is I want to display spinning circle on page on every onclick and then show text on the right hand side of the page. My code for spinning circle is:
HTML:
<div id="loading">
<img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>
JavaScript:
function hideLoading() {
document.getElementById("loading").style.display = 'block';
}
function showLoading() {
document.getElementById("loading").style.visibility = 'visible';
}
CSS:
#loading {
display: none;
}
Now, I don't know how to place them in my working code to get the desired result. Anybody knows the correct way of doing it?
Desired result: onclick "abc" on left hand side, spinning circle should be displayed for 1 sec and then "I should be printed on left side" should be displayed. Again on clicking "mno", first spinning circle should be shown for 1 sec and then text "I should be printed on left side" will be displayed. The fiddle has working version of onclick.
You should use a single handler function on each element that will both hide and show the loading gif. Also, it's a good idea not to use getElementById on every call, so save it in a variable:
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
Here I am trying to split the webpage into two columns and display text.</div>
<div id="one">
<div id="loading">
<img src="http://support.snapfish.com/euf/assets/images/answer_images/SpinningWheel.gif" />
</div>
<div id="message"></div>
</div>
<div id="two"> <b>This is test one<br /></b>
<b>This is test two<br /></b>
</div>
Javascript:
var elements = {};
function loadSpanContent() {
elements.loading.style.display = 'block'; // Show loading gif
spanContent = this.innerHTML
setTimeout(function () {
elements.message.innerHTML = "I should be printed on left side - " + spanContent;
elements.loading.style.display = 'none'; // Hide loading gif
alert("onclick Event detected! " + spanContent);
}, 1000);
}
window.onload = function mydisplayArray() {
var array = ['abc', 'xyz', 'mno'];
elements.loading = document.getElementById("loading");
elements.one = document.getElementById("one");
elements.message = document.getElementById("message");
for (i = 0; i < array.length; i++) {
var span = document.createElement('span');
span.innerHTML = array[i];
span.onclick = loadSpanContent;
one.appendChild(span);
}
};
Here is a fiddle: http://jsfiddle.net/nBaCJ/1/
I'm still confused by what you actually want here, but if you want to have the loading message disappear after one second, you should use setTimeout. Something like this:
function showAlert() {
showLoading();
setTimeout(hideLoading,1000);
//Hide loading circle
var myString = "I should be printed on left side";
document.getElementById("two").innerHTML = myString;
}
But you also need to fix your "showLoading" and "hideLoading". Something like this:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}
http://jsfiddle.net/7uxHC/9/
BTW: if you want your loading gif to appear over your content, then set its position:absolute in css, but note that you gif has a white, rather than transparent background so it will obscure your content.
Your request isn't clear.
But first, you should fix these 2 functions:
function hideLoading() {
document.getElementById("loading").style.display = 'none';
}
function showLoading() {
document.getElementById("loading").style.display = 'block';
}

Toggle div by triggering and image click mechanism

I am currently working with the toggle div function. I am using images to be the triggering point for toggling. For example when a div is close an image with a "plus" signs appears to indicate the user to expand and vice versa for compressing the div. The only issue is that I am using two sets of images for expanding and compressing divs but I can only get a set to work but not both. The is example I have doesn't work well in jsfiddle but if you like to look at it there here is the link: http://jsfiddle.net/sQnd9/4/
Here is my example:
<script type="text/javascript">
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>';
}
}
</script>
<script type="text/javascript">
function toggle2(showHideDiv2, switchImgTag2) {
var ele = document.getElementById(showHideDiv2);
var imageEle = document.getElementById(switchImgTag2);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src=images/arrow_open.png/>';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src=images/arrow_close.png/>';
}
}
</script>
<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div>
<br />
<div id="contentDivImg" style="display:none;">
Example1-Content
</div>
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
<br />
<div id="contentDivImg2" style="display:none;">
Example2-Content
</div>
The problem isn't your code (other than the mistakes that #appclay pointed out). The problem is jsfiddle. Just look at the source code it produces. When you put anything in the "javascript" section it's puts it in it's own namespace, preventing access to those function names outside of that block (so your call to toggle1 for example was throwing an undefined function error).
You can see this in action by defining these functions directly as window. properties. Then your code works as expected. See http://jsfiddle.net/sQnd9/7/
In your own code, you presumably would not encapsulate these function names into their own scope, and it would work as expected (but note again that you should make the changes #appclay pointed out).
Also, you probably shouldn't be doing it this way anyway. You should attach the event handlers in the javascript block.
You're missing the quotes on the img src attribute in the second one
You're also referencing the first function in both examples, so the second function never gets called... Try changing:
<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>
to
<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div>
Also, I don't know why you have semicolons in your img tags, they shouldn't be there.

using jquery to insert javascript (for Quicktime) into a <div>

I'm pretty new to javascript and programming and have run into a brick wall with my project. I have a div which contains the javascript to embed a quicktime player, when the page is first loaded no .mov file is pointed at by the page so a placeholder div is 'unhidden' and the player div is set to style.display = 'none'.
So far so good, the user then enters the name of the new movie, the placeholder div is hidden and the player div is unhidden. My problem is that the javascript in the player div didn't run when the div was made visible, if I make the script for the player into a seperate function then call it when the player div is unhidden then the player runs full screen and not in the div.
I've tried using jquery to add the javascript into the div after the div is made visible but can't seem to get $("#player").load(somescript) or $("#player").html(htmlwithjavain) to add the script.
I know the player div contenst can be changed as I can use $("#player").empty(); and $("#player").html(); to manipulate it.
Thanks for reading, hope you can help
Here's the relevant code:-
<html>
<head>
<title>Browse Media Player</title>
<link rel="stylesheet" type="text/css" href="CSS/browser.css" />
<script type="text/javascript">
<!--
var userinterrupt=false;
var runonce=false;
var currentfile;
var basemediapath = "http://10.255.10.71/IsilonBrowse/movfiles/";
var playerheight = 750;
var playerwidth = 900;
var currenttc;
var basetime;
var baseduration;
var currentduration = "no tc available";
var tcoffset = 35990;
var playspeed = 1;
var boolisplaying=true;
var boolonslide=false;
//function to fire off other methods when the DOM is loaded
//Use in place of body onload, using jquery library
//
$(document).ready(function()
{
//showEvents('jquery running');
showhideplayer(null);
});
//-->
</script>
</head>
<body onload="forceslider(); timecode()">
<div class="container">
<div id="timecode_container">
<div class="tc_overlay"></div>
<div id="timecode" class="timecode"></div>
</div>
<div id="player" class="playerdiv" style="display:none;">
**javascript for player goes here...**
</div>
<div id="noclipoverlay" class="playerdiv" style="display:none;">
<p>No media loaded...
</div>
<div id="noclipoverlay2" class="playerdiv" style="display:none;">
<p>loading media....
</div>
</div>
<div id="loadstatus"></div>
<div id="alerts"></div>
</body>
</html>
Now the mainstuff.js file which should add the javascript code:-
//function to switch the player div and mask div is no media file is
//defined in the 'currentfile' variable
//
function showhideplayer(state)
{
if (!currentfile)
{
showEvents('wtf no media');
document.getElementById("player").style.display = 'none';
document.getElementById("noclipoverlay").style.display = 'block';
}
else if (currentfile)
{
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
showEvents('valid media file');
}
}
//end of showhideplayer
//function to change movie files, note SetResetPropertiesOnReload must be set to false
//otherwise the B'stard player will default all attributes when setURL runs
//
function changemovie(newmovie)
{
oldfile = currentfile;
if (newmovie == currentfile)
{
showEvents('same file requested so no action taken');
return;
}
if (newmovie != currentfile)
{
showEvents('changing movie');
//switch the divs around to hide the 'no media slide'
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
}
showEvents('movie changed to: '+newmovie);
currentfile=newmovie;
if (!oldfile)
{
$("#player").empty();
showEvents('the old media file was blank');
$("#player").load("/path/loadplayer.js");
}
document.movie1.Stop();
document.movie1.SetResetPropertiesOnReload(false);
document.movie1.SetURL(currentfile);
//showEvents('movie changed to: '+newmovie);
if (boolisplaying)
{
document.movie1.Play();
}
}
[EDIT] and here's the contents of loadplayer.js:-
var movie1 = QT_WriteOBJECT(
currentfile, playerwidth, playerheight, "",
"controller","false",
"obj#id", "movie1",
"emb#id","qt_movie1",
"postdomevents","True",
"emb#NAME","movie1",
"enablejavascript","true",
"autoplay","true",
"scale","aspect",
"pluginspage","http://www.apple.com/quicktime/download/"
);
Without knowing the content of your loadplayer.js file, it will be difficult to give you a solution.
For example, if the script attempts to do a document.write() after the page has loaded, it will create a new page, overwriting the current page. Is that what you mean when you say the quicktime movie is running full screen?
Also it is generally not a good idea to load a SCRIPT element and insert it as HTML. When you add HTML to the page, jQuery finds all the SCRIPT elements and evaluates them in a global context, which might give you unexpected results.
Use QT_GenerateOBJECTText_XHTML or QT_GenerateOBJECTText from AC_QuickTime.js if you'd like to return a string.

Categories