I am playing around a hangman game (found on the web) using json file as a quizbank processed by js controller. There is only one file with quiz-words (quizbank.json) connected to the controller. I want to add some options like level, topic etc. by putting each option into separate json file and connecting them to the controller. Suppose, I have some files (quizbank1.json, quizbank2.json etc.) What is the best way to switch between them, preferably on the same page i.e. without reloading html. Below is the entire code. The JS:
$(document).ready(function () {
var questionBank=new Array;
var wordArray=new Array;
var previousGuesses=new Array;
var currentWord;
var currentClue;
var wrongAnswerCount;
$.getJSON('quizbank.json', function(data) {
for(i=0;i<data.wordlist.length;i++){
questionBank[i]=new Array;
questionBank[i][0]=data.wordlist[i].word;
questionBank[i][1]=data.wordlist[i].clue;
}
titleScreen();
})//gtjson
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN</div><div id="startButton" class="button">BEGIN</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN1</div><div id="startButton" class="button">BEGIN1</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function titleScreen(){
$('#gameContent').append('<div id="gameTitle">HANGMAN2</div><div id="startButton" class="button">BEGIN2</div>');
$('#startButton').on("click",function (){gameScreen()});
}//display game
function gameScreen(){
$('#gameContent').empty();
$('#gameContent').append('<div id="pixHolder"><img id="hangman" src="man.png"></div>');
$('#gameContent').append('<div id="wordHolder"></div>');
$('#gameContent').append('<div id="clueHolder"></div>');
$('#gameContent').append('<div id="guesses">Previous guesses:</div>');
$('#gameContent').append('<div id="feedback"></div>');
$('#gameContent').append('<form><input type="text" id="dummy" ></form>');
getWord();
var numberOfTiles=currentWord.length;
wrongAnswerCount=0;
previousGuesses=[];
for(i=0;i<numberOfTiles;i++){
$('#wordHolder').append('<div class="tile" id=t'+i+'></div>');
}
$('#clueHolder').append("HINT: "+currentClue);
$(document).on("keyup",handleKeyUp);
$(document).on("click",function(){$('#dummy').focus();});
$('#dummy').focus();
}//gamescreen
function getWord(){
var rnd=Math.floor(Math.random()*questionBank.length);
currentWord=questionBank[rnd][0];
currentClue=questionBank[rnd][1];
questionBank.splice(rnd,1);
wordArray=currentWord.split("");
}//getword
function handleKeyUp(event) {
//this line deals with glitch in recent versions of android
if(event.keyCode==229){event.keyCode=$('#dummy').val().slice($('#dummy').val().length-1,$('#dummy').val().length).toUpperCase().charCodeAt(0);}
if(event.keyCode>64 && event.keyCode<91){
var found=false;
var previouslyEntered=false;
var input=String.fromCharCode(event.keyCode).toLowerCase();
for(i=0;i<previousGuesses.length;i++){if(input==previousGuesses[i]){previouslyEntered=true;}}
if(!previouslyEntered){
previousGuesses.push(input);
for(i=0;i<wordArray.length;i++){
if(input==wordArray[i]){found=true;$('#t'+i).append(input);}
}//for
if(found){checkAnswer();}
else{wrongAnswer(input);}
}//if
}//if
}//handlekeyup
function checkAnswer(){
var currentAnswer="";
for(i=0;i<currentWord.length;i++){
currentAnswer+=($('#t'+i).text());
}
if(currentAnswer==currentWord){
victoryMessage();
};
}//checkanswer
function wrongAnswer(a){
wrongAnswerCount++;
var pos=(wrongAnswerCount*-75) +"px"
$('#guesses').append(" "+a);
$('#hangman').css("left",pos);
if(wrongAnswerCount==6){
defeatMessage();}
}//wronganswer
function victoryMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("CORRECT!<br><br><div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//victory
function defeatMessage(){
document.activeElement.blur();
$(document).off("keyup", handleKeyUp);
$('#feedback').append("You've Lost!<br>(answer= "+ currentWord +")<div id='replay' class='button'>CONTINUE</div>");
$('#replay').on("click",function (){
if(questionBank.length>0){
gameScreen()}
else{finalPage()}
});
}//defeat
function finalPage(){
$('#gameContent').empty();
$('#gameContent').append('<div id="finalMessage">You have finished all the words in the game!</div>');
}//finalpage
});//doc ready
The json:
{"wordlist":[
{
"word":"kangaroo",
"clue":"an animal"
},
{
"word":"starbucks",
"clue":"a company"
},
{
"word":"macaroni",
"clue":"a kind of food"
}
]
}
The html:
<!DOCTYPE html>
<head>
<title>Hangman Game</title>
<link href="main.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div id="topbar">Hangman Game</div>
<div class="spacer"></div>
<div id="gameContent">
</div>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
background-color:#ECD69D;
font-family: Arial, Helvetica, sans-serif;
}
#topbar{
height:50px;
margin:auto;
margin-top:50px;
color:#FFF;
font-size:36px;
width:800px;
border-bottom:solid white 1px;
}
#gameContent{
margin:auto;
width:800px;
height:600px;
position:relative;
overflow:hidden;
background-color:#A98F4C;
border-radius:15px;
}
.spacer{
height:30px;
}
#gameTitle{
margin-top:100px;
text-align:center;
font-size:40px;
color:#fff;
}
.button{font-size:17px;
width:100px;
margin:auto;
margin-top:20px;
cursor:pointer;
border:solid 1px white;
border-radius:4px;
text-align:center;
color:#fff;
}
.button:hover{
background-color:#6AB0FD;
}
#replay{
margin-left:0px;}
#wordHolder{
margin-top:50px;
margin-left:150px;
}
#clueHolder{
margin-top:130px;
margin-left:150px;
}
#guesses{
margin-top:20px;
margin-left:150px;
}
#pixHolder{
margin-left:30px;
width:75px;
float:left;
overflow:hidden;
}
#pixHolder img{
position:relative
}
#feedback{
margin-top:20px;
margin-left:150px;
font-size:34px;
color:#fff;
}
.tile{
height:40px;
width:40px;
float:left;
margin-right:10px;
background-color:white;
text-align:center;
font-size:24px;
color:#333;
padding-top:5px;
}
#finalMessage{
text-align:center;
font-size:40px;
color:#fff;
width:90%;
margin:auto;
margin-top:100px;
}
#dummy{
position:absolute;
left:-200px;
top:0px;
}
Any help deeply appreciated.
Related
I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript
when I click in the button the backgrounf color of the change but after one seconde it disappear
this is the code
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
<script>
function changerCouleur() {
document.bgColor= "#FFFggF";
}
</script>
</head>
<body>
<form>
couleur <input type="text" > <br>
<button onclick="changerCouleur()">changer couleur </button>
</form>
</body>
</html>
I see you already have an answer, but there is no localStorage mechanism with that example. You may want to study the following structure.
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{ // load
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = function(){
const a = [...arguments];
a.shift().classList.add(...a);
return aC;
}
rC = function(){
const a = [...arguments];
a.shift().classList.remove(...a);
return rC;
}
tC = function(){
const a = [...arguments];
a.shift().classList.toggle(...a);
return tC;
}
// small Library above - magic below can be put on another page using a load event *(except the // end load line)*
const bg = I('bg'), ch_bg = I('ch_bg'), gut = I('gut'), gutS = gut.style;
bg.oninput = function(){
if(this.value.trim().length < 3){
rC(this, 'good');
}
else{
aC(this, 'good');
}
}
ch_bg.onclick = ()=>{
if(hC(bg, 'good')){
let color = bg.value.trim();
bg.value = color; gutS.backgroundColor = color; localStorage.bgColor = color;
}
}
if(localStorage.bgColor){
gutS.backgroundColor = localStorage.bgColor;
}
else{
localStorage.bgColor = '#aaa';
}
}); // end load
//]]>
/* css/external.css */
*{
padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
-moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none;
}
html,body,.main{
width:100%; height:100%;
}
.main{
background:#aaa;
}
.bar{
position:relative; width:100%; height:39px; background:#ccc; padding:3px; border-bottom:1px solid #333;
}
.bar>*{
position:relative; display:inline-block; height:32px;
}
.bar>*>img{
width:32px; height:32px;
}
.bar h1{
font:bold 27px Tahoma, Geneva, sans-serif; margin-left:3px;
}
.guts{
width:100%; max-height:calc(100% - 39px); background:#aaa; padding:7px 7px 0; overflow-y:auto;
}
.guts *{
font:bold 22px Tahoma, Geneva, sans-serif;
}
label>span{
cursor:pointer; display:inline-block; height:27px; color:#fff; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; float:left;
}
label>input,label>select,label>textarea{
width:100%; height:38px; background:#fff; color:#000; padding:5px; border:1px solid #c00; border-radius:3px; box-shadow:none; margin:2px 0 5px 0; -moz-user-select:text; -ms-user-select:text; -webkit-user-select:text; user-select:text;
}
label>input.good,label>select.good,label>textarea.good{
border-color:#0c0;
}
label>textarea{
height:auto;
}
label>input[type=button],label>button{
cursor:pointer; height:auto; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; border:1px solid #007; border-radius:10px;
}
#ch_bg{
margin-bottom:7px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div class='bar'><h1>Color Change Example</h1></div>
<div class='guts' id='gut'>
<label><span>couleur</span><input id='bg' type='text' value='' /><input id='ch_bg' type='button' value='changer couleur' /></label>
</div>
</div>
</body>
</html>
#FFFggF is not a valid color code.
Please try this code:
function changerCouleur() {
document.body.style.background = "#ff9933";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
</head>
<body>
<form onSubmit="return false">
couleur <input type="text" > <br>
<button onclick="changerCouleur();">changer couleur </button>
</form>
</body>
</html>
I added the attribute onSubmit="return false" to the form because otherwise every time you click on the button the page is reloaded
I am trying to get the selected text inside a contenteditable div once a button is clicked and so far nothing I try is working. :( Here is the code I have thus far:
html
<html>
<head>
</head>
<body>
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>
</body>
</html>
css
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
javascript
function saveSelection() {
if(window.getSelection) {
sel = window.getSelection();
if(sel.getRangeAt && sel.rangeCount){
return sel.getRangeAt(0);
}
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange();
}
return null;
}
function restoreSelection(range) {
if (range) {
if(window.getSelection) {
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && range.select) {
range.select();
}
}
}
var selection;
window.addEventListener("load", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
textarea.addEventListener("blur", function(event){
selection = saveSelection();
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
I managed to only get the desired result if clicking inside an iframe.. If anyone could please help I would so much appreciate it. Thank you in advance and please go easy on me... :)
You may use selectionchange event
var selection;
window.addEventListener("DOMContentLoaded", function(){
var textarea = document.getElementById("my_textarea");
var boldTool = document.getElementById("tool-bold");
document.addEventListener("selectionchange", function(event){
var sel = document.getSelection();
if (sel.anchorNode.parentElement.id == 'my_textarea') {
selection = sel.toString();
}
});
boldTool.addEventListener("click", function(event){
console.log(selection);
});
});
html, body {
margin:0;
padding:0;
}
#my_textarea {
height:20rem;
width:20rem;
resize:none;
border:1px solid #000;
}
.toolbar {
display:flex;
flex-direction:row;
height:50px;
align-items:center;
border:1px solid #000;
width:200px;
padding:10px;
}
.tool {
border:1px solid #000;
width:1em;
height:1em;
line-height:1em;
text-align:center;
cursor:pointer;
}
.tool.bold {
font-weight:bold;
}
<div class="toolbar">
<span class="tool bold" id="tool-bold">B</span>
</div>
<div id="my_textarea" contenteditable>
</div>
I have 3 divs set up on my website, and at the moment I am using CSS3 to highlight each div for 5 seconds by changing the background colour. So the first div highlights for 5 seconds, then the 2nd then the 3rd. Can I acheive the same thing with Javascript?
My html is
<a href=""><div class="highlight" id="caption2">
Text1
</div></a>
<a href=""><div class="highlight" id="caption3">
Text2</div></a>
<a href="">
<div class="highlight" id="caption4">
Text3</div></a>
Js
$("div.highlight").each(function (i) {
var $self = $(this);
setTimeout(function () {
$self.removeClass("highlight")
$self.addClass("caption");
setTimeout(function () {
$self.addClass("highlight");
$self.removeClass("caption");
}, 1000);
}, i * 1000);
});
CSS
#caption2 {
position:absolute;
top:10px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption3 {
position:absolute;
top:70px;
left:-20px;
z-index:70;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption4 {
position:absolute;
top:130px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
.highlight {
background-color:#000;
}
.caption {
background-color:#f1583c;
color:yellow;
}
Sure! Nothing simpler than this:
var divs = document.getElementsByTagName("div")
for(var i = 0; i < divs.length; i++) {
setTimeout(function(n){
divs[n].className = "highlight";
}, i * 1000, i);
}
http://fiddle.jshell.net/e4Qv4/
Or if you want it more jQuery'ished, take something like this:
$("div").each(function(i){
var self = this;
setTimeout(function(){
self.className = "highlight";
}, i * 1000);
});
http://fiddle.jshell.net/e4Qv4/1/
Update
Your main problem is the css-selector specificity... An ID gets an higher rate then a class. The other thing is, that you've misunderstood my solution. Read a bit about the Sizzle-Selector engine, which is built in jQuery, that should help you.
I'm working on a website for a client and I am using ajax to get the contents of a file, html specifically, and then I am trying to insert that html into a div so that i can display the content. i know that i am getting the contents of the file because i have alerts set to display the request's readyState, status, and responseText, and it is showing the contents of the file in the alert. however when i attmept to insert it into the div using this line: document.getElementsByClassName('content').innerHTML = response; nothing happens. can anyone help me figure this out?
CODE:
JAVASCRIPT:
<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
document.getElementsByClassName('content').innerHTML = response;
}
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
document.getElementsByClassName('content').innerHTML = response;
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function home() {
getData("home");
}
function about() {
getData('about');
}
function proof() {
getData('contact');
}
function contact() {
getData('proof');
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
alert(e.description);
}
}
}
else
return false
}
HTML:
<body>
<div class="container">
<div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home -->
<span id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about -->
<span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof -->
<span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->
<div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
<div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
<div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
<div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower -->
</div><!-- end logo-->
<div class="content"></div><!-- end content -->
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->
CSS:
#charset "UTF-8";
/* CSS Document */
* {
margin:auto;
}
html, body {
height: 100%;
}
.container {
position:relative;
min-height: 100%;
width:800px;
}
.logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
.content {
position:relative;
top:0px;
left:0px;
padding-top:20px;
padding-bottom: 75px !important;
}
.footer {
position:relative;
height: 75px;
margin-top:-75px;
background-color:#06F;
bottom:0px;
left:0px;
}
.large{
font-size:36px;
}
.fltright {
position:relative;
float:right;
top:0px;
left:0px;
width:auto;
height:auto;
}
.fltleft {
position:relative;
float:left;
top:0px;
left:0px;
width:auto;
height:auto;
}
span.glow {
text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
color:#999;
text-align:center;
}
span.noglow {
color:#999;
text-align:center;
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
line-height:20px;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#link-home{
position:absolute;
width:75px;
height:30px;
top:110px;
left:419px;
}
#link-about{
position:absolute;
width:75px;
height:30px;
top:110px;
left:515px;
}
#link-proof{
position:absolute;
width:75px;
height:30px;
top:100px;
left:609px;
}
#link-contact{
position:absolute;
width:75px;
height:30px;
top:110px;
left:708px;
}
#home-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:442px;
background:url(images/home-flower.png);
}
#about-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:540px;
background:url(images/about-flower.png);
}
#proof-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:635px;
background:url(images/proof-flower.png);
}
#contact-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:733px;
background:url(images/contact-flower.png);
}
document.getElementByClassName is returning an array. You cannot set the innerHtml of an array you need to loop through the array and set each individual elements inner html;
Working example: http://jsfiddle.net/CYZUL/
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
var elements = document.getElementsByClassName('content');
for(var x=0; x < elements.length; x++)
{
elements[x].innerHTML = response;
}
}
Why not using the jQuery's $.load(); function and save your self a lot of pain and time