DerekBogie

Alright, that makes more sense. How would you suggest using the getItem and setItem methods to be able to save 20 localStorage variables with this method and not need to overload the localStorage variables onto players memory? If possible I would like to find a way to save 20 different variables with different values with localstorage. without having to make a new localstorage variable for each different value. That is why I thought an array would work best.

I am attempting to use a localStorage array as a set of 20 binary switches so to say. The entire length of the area will be set to 0 all the way thru and I need to be able to switch individual array elements to 1. Basically this is what I have started with in the beginning. localStorage.dragonEggs = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; There are 20 eggs throughout the maps. When you find a certain one, lets say egg 4. In the function I used , localStorage.dragonEggs[3] = 1; I am not sure since it is a localStorage Variable if i can do it this way or not? when I check my developer console it still shows all 20 elements at 0.

I understand exactly what you mean, thank you. I was able to recode it to getHours and used it as a localStorage variable to keep track. Due to my game running two direct Iframes to play the game that was the only way that it would work to update the other iframe.

I figured it out using your method.. it seems to do the job as needed. Basically here it is in a nutshell When you open a chest it checks this in the function; d = new Date(); playerChestTimer = d.getHours(); if (playerChestTimer >= 19) { localStorage.lastOpened = 0; }else { localStorage.lastOpened = playerChestTimer; } So if the live Hourly Timer get over the 19th hour it will simply make the lastOpened variable to 0. Then the onLoad function for the page checked both variables in this format if (playerChestTimer >= (localStorage.lastOpened + 4) && playerChestTimer <= 19) { localStorage.chests = 0; } It seemed to work on the mockup really well and we will just have to see how it works tomorrow. Ingolme your idea worked beautifully with only one chest but with this i can have multiple chests on the same function. Thank you for your help it made it possible.

Ive been working with this for roughly an hour now and it works great except i can only get it to work with one chest. I have to be able to make this system work with a totla of 10 chests. How can i restructure it to do so? basically i am trying to work it like this. I put the, localStorage.lastOpened = new Date(); into the open treasure chest function. Also with this I add 1 to the localStorage.chests variable. I used your code like this if((new Date()).getTime() - localStorage.lastOpened.getTime() >= 14400000) {localStorage.chests = 0;} im using that on the body Onload function along with function onLoadFunction() { if((new Date()).getTime() - localStorage.lastOpened.getTime() >= 14400000) { localStorage.chests = 0; } if (localStorage.chests <= 9) { var tempArea = Math.floor((Math.random() * 6) + 1); if (tempArea == 1) { document.getElementById("chestSetOne").style.zIndex = "10"; } else if (tempArea == 2) { document.getElementById("chestSetTwo").style.zIndex = "10"; } else if (tempArea == 3) { document.getElementById("chestSeThree").style.zIndex = "10"; } else if (tempArea == 4) { document.getElementById("chestSetFour").style.zIndex = "10"; } else if (tempArea == 5) { document.getElementById("chestSetFive").style.zIndex = "10"; } else if (tempArea == 6) { document.getElementById("chestSetSix").style.zIndex = "10"; } } else { document.getElementById("chestSetOne").style.zIndex = "-50"; document.getElementById("chestSetTwo").style.zIndex = "-50"; document.getElementById("chestSetThree").style.zIndex = "-50"; document.getElementById("chestSetFour").style.zIndex = "-50"; document.getElementById("chestSetFive").style.zIndex = "-50"; document.getElementById("chestSetSix").style.zIndex = "-50"; }} How can i make it fit together

You guys have helped me tremendously and I have one more should be simply task. My game will display 6 treasure chests around the map.. When you open a treasure chest It will add 1 to the localStorage.chest variable to keep track of how many treasure chests you have opened. after you open 10 total chests the chests will all disapear until the 4 hour timer resets the variable. This way they cant refresh the page numerous times and keep getting treasure chests. I curently have this set up to keep track of the hours d = new Date(); playerChestTimer = d.getHours(); Can you help me to write an automatic function that will reset the localStorage.chests variable back to 0 every 4 hours real time? I figured if i write, if (playerChestTimer == 5) {localStorage.chests = 0;} then the variable will constantly reset at that specified hour until the next hour. My other main concern is the variable not resetting if the player isnt on the game. I figured that this method will only reset that variable if the player is actively on the game at that specified time.

It seems since the main page hold the healthbar ID. The Iframe within that main page holds the functions to the enemy. So when you click the function within that Iframe it refuses to update the main page ID. I have been reading something such as parent.document.getElementById('frameid').contentWindow.somefunction() or window.frames['myIFrame'].contentDocument.getElementById('myIFrameElemId') But I dont know if this is what I am needing to fix my issue.

I appreciate your help and time in speaking with me. I am a second year college student who hasn't even taken a javascript course yet so everything i am doing i am learning as i go. Basically I started to make this game to help understand the structure and basic concepts of javascript. I must say that though I do not know the correct methods or the proper minimizing steps to keep it clean and straight to the point, it is teaching me the basics to an extent. I will continue to look into these problems and troubleshoot them further.

Thanks Ingolme, That helps to understand the basic structure a little more. I have attempted to make a function that depicts player damage, updates the healthbar, checks to see if the player is dead. But when that function is called it is not updating whatSoever. I beleive this has something to do with the healthbar function being nestled inside the iframe other than that function of the jelly monster. Basically the only way i have been able to get the desired results of the functions i need is by this. I have been attempting to rewrite the overall function of each monster to call a seperate function that all monster functions would call to do this updating but again, it roots back to the same problem at the beginning of this forum post of the health bar not properly updating. setInterval(function () { document.getElementById('healthSystem').style.width = localStorage.health+"%"; document.getElementById("playerPotions").innerHTML = localStorage.potions; if (localStorage.health <= 0) { if(localStorage.coins <= 2) { window.location ="gameOverTitle.html"; } else { window.location ="gameOverContinue.html"; } } if (enemyDamage >= localStorage.health) { localStorage.health = 0; } }, 100);

I decided to change it from maxhealth and implement the defense and strength. This feels really sloppish on the values but heres what i have for one function with one monster. please tell me there is an easier way to add the rest of the monsters with different values than writing each of these functions for each monster? Basically when you click on the animated monster it calls this function. function jelly(e){ var enemyHitDamage = Math.floor((Math.random() * 2) + 1); if (enemyHitDamage == 2) { // if random number between 1 to 2 lands on 2 you take damage document.getElementById('damagePic').style.zIndex = "10"; //flashes a 50% transparent red picture when you take damage enemyDamage = enemy.jellyStrength - Number(localStorage.defense) + 150; enemyDamage = (enemyDamage / 5) + Math.floor((Math.random() * 5) + 1); enemyDamage = enemyDamage.toFixed(0) localStorage.health = Number(localStorage.health) - enemyDamage; document.getElementById('fight1').innerHTML = " "+enemyDamage; // shows the damage above enemy setTimeout( "hideDisplay();", 50); } else { // if random number from 1 to 2 lands on 1 you deal damage var hitDamage = (enemy.jellyStrength * Number(localStorage.strength)) + 1; hitDamage = hitDamage / 100 + Math.floor((Math.random() * 5) + 1); hitDamage = hitDamage.toFixed(0) document.getElementById('fight1').innerHTML = " "+hitDamage; enemy.jellyHealth = enemy.jellyHealth - hitDamage; if (enemy.jellyHealth <= 0) { soundBuzzer.play(); } } setTimeout( "hideDisplay();", 550);}function hideDisplay() { document.getElementById('damagePic').style.zIndex = "-10"; //hides the red flash after you get hurt document.getElementById('fight1').innerHTML = ""; document.getElementById('fight2').innerHTML = ""; document.getElementById('fight3').innerHTML = ""; document.getElementById('fight4').innerHTML = ""; document.getElementById('fight5').innerHTML = "";}

I have it figured out thank you! The problem exactly was that the jelly function was nestled into the iframe while the health bar was on the main page. Basically what I had to do was on the main page place this in the onLoad function for that page. Now all i have to do is make a loop to keep track and update the main page from the new variable values of the localStorage.health. document.getElementById('healthSystem').style.width = localStorage.health+"%"; and to subtract health from the health bar i wrote this in the function for the jelly attack localStorage.health = Number(localStorage.health) - 25; What would be a good mathematical equation to be able to use a max health that can go past 100 but keep the values of 100% for the health bar? I want to be able to allow the player to gain levels and max health. i already have a localStorage.MaxHealth variable set but cannot figure out the solution to the math equation.

You are absolutely right on placing the health bar on the same page instead of on the Iframe. I have to figure this one out as the iframe map where the monster is on moves with the mouse and the health bar needs to stay stationary liek the rest of the menus. As for refactoring the helmets I thought there could be an easier wya instead of writing an individual function for each helmet to buy and sell. Would I use a "case" system to detect the helmet then?

This error i have no idea how to fix and really don't understand what is wrong Uncaught ReferenceError: e is not defined Basically when you click the Jelly Blob on the screen it will call the function (which isnt finished) listed below. //function called when you click on the jelly monsterfunction fightTwo(e){ // Below shows a number above the jelly monster showing the damage taken document.getElementById('fight2').innerHTML = " " + " 19"; //Below is SUPPOSE to update the Health Bar with the new % value document.getElementById('healthSystem').style.width = "30%"; // This Timeout calls a new function in less than a second to remove the damage taken number setTimeout( "hideDisplay();", 350);}function hideDisplay() { //resets the damage taken number above jelly monster document.getElementById('fight2').innerHTML = "";} The html <div class="progress-bar blue stripes"> <div id="healthSystem"></div></div> The HTML that you click on the Jelly to fight <div class="jellyTwo" id="fight2" onClick="fightTwo(event)"></div> I have uploaded the game for you to be able to see more clearly everything that it is suppose to be doing.. Click new game, Skip intro then leave town.... click either jelly on the map to initiate the functionthat is suppose to change the health bar. http://emeraldcreations.site90.com/

So basically if my pages are labeled, 1Map.html, 2Map.html, 3Map.html I need to list them in the CSS as such? #1Map #playerEggs { } If so thank you for that that will def help. Also One quick question. Would it help load faster without the inline Style rather than the seperate CSS? I just saved your html script and tried it and it works perfectly by itself. However everytime I implement it directly into mine it does nothing just like every other time. Do you possibly know of a different way i can achieve what i need for a health bar rather than this if i cannot get it to work?

Each inline CSS is basically necessary as these same images show up in multiple different locations with different dimensions and locations Thank you for that link

Im sorry i checked the console and didnt see any other errors other than a few that were already in place before hand. One was for the custom cursor. Every other function is working properly but here is the entire html script for that page. i attached a picture of my console.. the gam1090 is a custom cursor error ive had since the beginning.. I am no longer using a timed loop for this current set up. the timed loop was something i used when i updated the game with actual pictures of a health bar. i deleted the entire system for this current one. <html><head><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /><meta charset="utf-8" /> <title>The Legend of the Seven dragon</title> <link rel="stylesheet" type="text/css" media="screen" href="CSS/mainsheet.css" /> <link rel="shortcut icon" href="favicon.ico" /></head><body onload="gameupdate ()" oncontextmenu="return false"><audio id="soundEfx" src="music/fall.mp3"></audio><audio id="soundCompletion" src="music/completion.mp3"></audio><audio id="soundReset" src="music/resetButton.mp3"></audio><audio id="soundBuzzer" src="music/buzzer.mp3"></audio><audio id="soundHeal" src="music/heal.mp3"></audio><audio id="soundScroll" src="music/scroll.mp3"></audio><div id="gameArea"><div class="progress-bar blue stripes"> <div id="healthSystem"></div></div><img id="menuLayout" style="width: 85%; height: 26px;" src="images/menuTop.png"><img id="menuLayout" style="width: 24%; height: 64px;left: 87.23%;" src="images/menuTopRight.png"><img src="images/menuLeftTop.png" id="menuLayout" style="width: 40; top: 100px; height: 150;"><img src="images/menuLeft.png" id="menuLayout" style="width: 16; top: 21px; height: 670;"><img src="images/menuBottom.png" id="menuLayout" style="width: 79.5%; top: 93%; height: 41px;left: 31.9%;"><img src="images/menuBottomLeft.png" id="menuLayout" style="width: 28.7%; top: 90%; height: 64px;"><img src="images/menuRight.png" id="menuLayout" style="width: 16px; left: 110%; top: 64px; height: 650px;"><iframe src="reload.html" border="0" scrolling="yes" overflow="scroll" style="border: 0px; border-image: none; left: 4%; height: 95%; float: left;position: absolute;width: 106%;" seamless="seamless"></iframe><h1 id="gametime" style="opacity: 0; width: 0px; height: 0px; left: 0px; top: 0px;"></h1><h1 id="dragonCoins" style=" z-index: 10; left: 10.5%; top: 88%;"></h1><h1 id="playerGold" style="left: 90.8%; top: 3%; width: 155px; text-align: center; color: rgb(255, 255, 102); font-size: 20px; font-style: oblique; position: absolute;z-index: 10;"></h1><img onclick="inventory ()" border="0" src="images/spikes.jpg" id="killzone" style=" position: absolute; opacity: 0; top: 94%; width: 250px; height: 40px; left: 955px; z-index: 10;"><img style="left: 4%; top: 13%; width: 30; height: 150; z-index: 80; position: absolute; opacity: 0;" onclick="showWeaponSlider ()" src="images/spikes.jpg" border="0" "=""><div id="weaponSlider"><img src="images/weaponsSlider.jpg" style="width: 600px; left: 4%; top: 12%; height: 500px; z-index: 9;position: absolute;"><h1 id="timesFallenStats" style="left: 82%; top: 25.6%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="strength" style="left: 30%; top: 95%; width: 90px; text-align: center; color: rgb(8, 77, 8); font-size: 30px; position: absolute; z-index: 90;">0</h1><h1 id="defense" style="left: 79%; top: 95%; width: 90px; text-align: center; color: maroon; font-size: 30px; position: absolute; z-index: 90;">0</h1><h1 id="enemiesSlain" style="left: 82%; top: 40.8%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="damageTaken" style="left: 82%; top: 56.5%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="experience" style="left: 82%; top: 71.6%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><img id="helmetOne" border="0" style="width: 37px; height: 50px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetOne.jpg" "><img id="helmetTwo" border="0" style="width: 34px; height: 48px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetTwo.jpg" "><img id="helmetThree" border="0" style="width: 28px; height: 47px; z-index: 100;left: 18%;position: absolute;top: 20%; opacity: 0;" src="images/helmetThree.jpg" "><img id="helmetFour" border="0" style="width: 37px; height: 47px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetFour.jpg" "><img id="armourOne" border="0" style="width: 40px; height: 45px; z-index: 100;left: 36%;position: absolute;top: 32%; opacity: 0;" src="images/armourOne.jpg" "><img id="armourTwo" border="0" style="width: 45px; height: 44px; z-index: 100;left: 36%;position: absolute;top: 32%; opacity: 0;" src="images/armourTwo.jpg" "><img id="armourThree" border="0" style="width: 48px; height: 46px; z-index: 100;left: 35.5%;position: absolute;top: 32%; opacity: 0;" src="images/armourThree.jpg" "><img id="armourFour" border="0" style="width: 46px; height: 48px; z-index: 100;left: 36%;position: absolute;top: 31.5%; opacity: 0;" src="images/armourFour.jpg" "><img id="swordOne" border="0" style="width: 43px; height: 40px; z-index: 100;left: 8%;position: absolute;top: 62%; opacity: 0;" src="images/swordOne.jpg" "><img id="swordTwo" border="0" style="width: 43px; height: 44px; z-index: 100;left: 7.5%;position: absolute;top: 63%; opacity: 0;" src="images/swordTwo.jpg" "><img id="swordThree" border="0" style="width: 43px; height: 44px; z-index: 100;left: 7.5%;position: absolute;top: 62.5%; opacity: 0;" src="images/swordThree.jpg" "><img id="swordFour" border="0" style="width: 46px; height: 50px; z-index: 100;left: 7.5%;position: absolute;top: 62%; opacity: 0;" src="images/swordFour.jpg" "><img id="shieldOne" border="0" style="width: 38px; height: 46px; z-index: 100;left: 39%;position: absolute;top: 61.5%; opacity: 0;" src="images/shieldOne.jpg" "><img id="shieldTwo" border="0" style="width: 38px; height: 46px; z-index: 100;left: 39%;position: absolute;top: 61.5%; opacity: 0;" src="images/shieldTwo.jpg" "><img id="shieldThree" border="0" style="width: 40px; height: 52px; z-index: 100;left: 39%;position: absolute;top: 61%; opacity: 0;" src="images/shieldThree.jpg" "><img id="shieldFour" border="0" style="width: 42px; height: 51px; z-index: 100;left: 39%;position: absolute;top: 61%; opacity: 0;" src="images/shieldFour.jpg" "><img id="bootsOne" border="0" style="width: 43px; height: 48px; z-index: 100;left: 36%;position: absolute;top: 82%; opacity: 0;" src="images/bootsOne.jpg" "><img id="bootsTwo" border="0" style="width: 40px; height: 47px; z-index: 100;left: 36.5%;position: absolute;top: 82%; opacity: 0;" src="images/bootsTwo.jpg" "><img id="bootsThree" border="0" style="width: 34px; height: 44px; z-index: 100;left: 37%;position: absolute;top: 82.5%; opacity: 0;" src="images/bootsThree.jpg" "><img id="bootsFour" border="0" style="width: 38px; height: 42px; z-index: 100;left: 37%;position: absolute;top: 82.5%; opacity: 0;" src="images/bootsFour.jpg" "></div><img style="left: 48%; top: 93%; width: 145; height: 30; z-index: 80; position: absolute; opacity: 0;" onclick="showItemSlider()" src="images/spikes.jpg" border="0" "=""><div id="itemSlider"><img src="images/itemSlider.jpg" style="width: 750px; left: 17.3%; top: 83.4%; height: 100px; z-index: 9;position: absolute;"><h1 id="playerLockPicks" style="position: absolute; top: 139%; left: 108.38%; font-size: 13; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerPotions" style="position: absolute; top: 140%; left: 29.2%; font-size: 13; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerScrolls" style="position: absolute; top: 139%; left: 49.1%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerKeys" style="position: absolute; top: 139%; left: 68.75%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerEggs" style="position: absolute; top: 139%; left: 88.49%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><img id="killzone" style="left: 22%; top: 150%; width: 75px; height: 25px; position: absolute; opacity: 0; z-index: 105;" onclick="usePotion ()" src="images/spikes.jpg" border="0" "=""><img id="killzone" style="left: 42%; top: 150%; width: 75px; height: 25px; position: absolute; opacity: 0; z-index: 105;" onclick="useScroll ()" src="images/spikes.jpg" border="0" "=""></div></div><script src="scripts/BasicFunctions.js"></script></body> </html>

Since i couldnt figure out that last code, Sorry I attempted to simplify the entire set up in a way. Maybe this will be better to understand. I use CSS to change the width of the health bar but cannot get javascript to take control of the css property of the width and alter it with a function. I dont know why it wont work I have used this method for numerous other functions in my game. Ive taken the default inline css style out of the html. html <div class="progress-bar blue stripes"> <div id="healthSystem"></div></div> The value of 100% is not a set value. I simply used the 100% value for testing purposes in attempt to manipulate the health bar. Javascript document.getElementById('healthSystem').style.width = "100%"; Again the values set in the CSS and Javascript are not a have to have set value. They can be any value im just attempting to try to get the value to change with javascript CSS #healthSystem {width: 80%;}.progress-bar { background-color: #1a1a1a; height: 15px; padding: 2px; width: 150px; margin: 0px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; position: absolute; z-index: 125; left: 10%; top: 30px;}.progress-bar div { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; }.blue div { background-color: red; } This entire set up can be changed to whatever will work honestly. Nothing in this code has to be named or coded a certain way, i just need it to actually work and have a red health bar that i can manipulate by changing the width value within a javascript function. Like i said i have used this method numerous times, i have a feeling that the rest of the CSS for the health bar are preventing the change with javascript for some reason.

I beleive i understand the concept. Am lost on the [0], Ingolme. I have never seen .getElementsByTagName but i assume its calling the indvidual span elements correct?

This doesn't seem to work. I think the html portion isnt matching up with the new code. Should the html look like this? <div class="progress-bar blue stripes"> <span id="progressBar" style="width: 10%"></span></div> or like this <div id="progressBar" class="progress-bar blue stripes"> <span style="width: 10%"></span></div> I have tried both ways for the html portion. and placed your code in my javascript function with no luck in changing the width of the bar. Like i said the default width of the html is irrelevant because i will code it to be different based on the players current health on a timed loop update function. document.getElementById('progressBar').getElementsByTagName("span")[0].style.width = "40%";

In the HTML i will set it to default 100% health. I will use a timed loop function to test player health from the variable localStorage.health and compare it to localStorage.MaxHealth. I havent rewritten the code to test for player health yet, right now im putting in default values and see if the health bar actually moves and slides the way its suppose to by changing the width value on a click function of the enemy. If i can just get the javascript to be able to manipulate the default width value in the HTML span then i will be set. So currently what i previously listed it all the coding i have so far for this health bar and functions.

Default width set up with the HTMl <div id='progressBar' class="progress-bar blue stripes"> <span style="width: 10%"></span></div> Using a function that is already made to attack. When that function is activated in javascript I would like to manipulate the inline CSS on the Span in HTML. I attempted to make the id="progressBar" on both the div and the span and neither works. I do not understand what im missing as i have used this method a lot to change css within the game. document.getElementById('progressBar').style.width = "40%"; Unfortunately for some reason this will not work at all and does not change the width of the span progress bar. Here is the CSS for reference. The picture shows the health bar in the top left corner.. On the map you see a little jelly with a number 10. When you click that jelly monster it randomizes damage to both you and the jelly which i need to reflect back to the players health. .progress-bar { background-color: #1a1a1a; height: 15px; padding: 2px; width: 150px; margin: 0px 0; border-radius: 5px; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; position: absolute; z-index: 125; left: 10%; top: 30px;}.progress-bar span { display: inline-block; height: 100%; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; transition: width .4s ease-in-out; }.blue span { background-color: red; }

Correct i have all the functions in place.. With what i just responded with is what i cannot get to change. I have attempted to change the width percentage of that span with javascript with the getElementById but it simply does it change anything. The only thing it will do is freeze the rest of function from being completed after the attempted inline style width change. I simply just need a way to maniuplate the span width percentage with javascript

Basically for it all to work it could be as simple as a single element. this code in the html changes the percentage of life left in the health bar. <div class="progress-bar blue stripes"> <span id= "progressBar" style="width: 10%"></span></div> Can we find something such as this below to simply change the width of the life bar in javascript? I can manually set up the percentage of health based on "IF" statements. I plan on using variables such as Defense and Attack along with a Math.random call to judge the amount of health to be lost. I have coded this set up below but unfortunately it does not work. This code is nestled in a function when an enemy is clicked on for attack. document.getElementById('progressBar').style.width = "40%";

Honestly not as much as i would like to know. I do see how it fits together and transitions but as stated I cannot figure it out enough to alter it to work for the way i am wanting to to work. MY health system is set up with localStorage.health, and localStorage.maxHealth. I will use these two variables to control the health bar percentage areas. I am attempting to take a progress bar and flip it to work as a health bar system by using CSS or any other method to alter the percentage of fullness of the progress bar depending on those two variables. The current IDs, and set up i posted is not even dire, i had used it from researching and cannot get it to work the way i wanted to. So if you can help point me in a direction of the set up im attempting that would be great. Starting from complete scratch would probably do better for me.

I beleive there is a problem with my progress bar originally. Your script shows two progress bars both showing progression and changing the values of progression does not change or stop the bar from going to 100%.