0

I want to implement this feature where say a meter is included and basically depending on the option you choose, it fluctuates. So if one goes east and ends up at a store, the meter is say, 30% full. But if they goes west, the meter is like 20%. How would I be able to incorporate an HTML feature into my JavaScript code? Is there a way where I can solely write HTML in there without disrupting the JavaScript code>

I tried doing and then adding a var called meter with a document.getElementById ending in .innerHTML but that didn't seem to work.

Here's the code for west, which doesn't have any other options to choose from as of right now:

JavaScript

else if (newInput == "West") {
    textInput = "You went to the abandoned neighborhood";
    //state = "sites"
    document.getElementById("message").innerHTML = textInput;
}

And here's the HTML for the meter that I'd like altered:

<p align = "center" id = "meter">
    <font color = "red">
        <b>Awareness:<progress value = "0" max = "100"></b>
    </font>
</p>

Thank you for the response!

Jack
  • 1,893
  • 1
  • 11
  • 28
The.Epistemophile.Bibliophile
  • 221
  • 3
  • 12
  • I'm really sorry. I honestly don't know what you're asking. – evolutionxbox Apr 05 '20 at 20:12
  • 1
    Make a decision between `"meter"` and `"message"`, and then use consistently. – PM 77-1 Apr 05 '20 at 20:14
  • @evolutionxbox what I want is a different percentage of the meter full depending on the options one chooses to go. So for this example, if one typed in west, the meter will be displayed a certain percentage. I would like to know how to make that work – The.Epistemophile.Bibliophile Apr 05 '20 at 20:20
  • A couple things. Pleas stop using ``. Is it `message` or `meter`? Why is `` being used when `` [exists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)? Have you tried editing the `value` property of the `` element? May you provide a [mcve]? – evolutionxbox Apr 05 '20 at 20:23
  • Sorry, my bad it's a progress bar. I gave the progress bar the id of "meter". Message is from a previous id I'm using, it doesn't have anything to do with the progress bar. – The.Epistemophile.Bibliophile Apr 05 '20 at 20:27
  • 1
    Ten If you want to manipulate the progress bar with help of javascript this code will help 1. provide a id to element e.g: file 2. var z = document.getElementById('file'); z.value =80;// you can manipulate the value – Kirti Chaturvedi Apr 05 '20 at 20:47
  • Thank you so much! It worked! – The.Epistemophile.Bibliophile Apr 05 '20 at 21:34

0 Answers0