How would I use output from a dropdown with javascript?

Question

This may seem like I'm a complete noob, and if you're thinking that, you're right. I'm trying to do something for some friends with my limited coding knowledge for our Pathfinder campaign, I know, there are easier ways to do it, but I want something I can do, then send to all of them so they can use it.

Anybody who plays Pathfinder and knows the Words of Power will understand why I'm doing this, most of you that don't probably won't get it. The goal for this is to be able to have separate dropdown menus to select the words from, then press a button and it spits out the effect/duration/level/etc from a pre-written list within the page itself. I want to make this in as few files as possible, but if need be, more than one can be used.

I know how to do the HTML and CSS stuff, make it all work and look good, but I've never really worked with JS, so if you help me out, please don't spare any instruction with the JS.

Thank to anyone that helps, and I totally understand if you can't help with this

EDIT: this is my code so far, what I want is to be able to select 'Personal' which has a value of '1' and have the JS see that and set the value of variable X to the string associated with '1', and then put that into the .innerHTML output.

2nd EDIT: after a lot of fiddling, and help from stoic_monk, I've finally got it to work like I wanted to. Thanks guys!

<!doctype html>
<html>
  <body>
      <!-- dropdown -->
    <select id="optselect">
      <option selected="selected" value="1">Hello</option>
      <option value="2">World</option>
      <option value="3">Yoyoma</option>
    </select>
    <!-- output area -->
    <p>output: <strong id="output">-</strong></p>
    <!-- button to confirm value -->
    <button id="bigbutton">Select Value</button>
    <!-- button to decide text -->
    <button id="confirm" onclick="displayOutput()">Confirm Selection</button>


    <!-- script area -->
    <script>
        var button = document.getElementById('bigbutton');
        var select = document.getElementById('optselect');

      button.addEventListener('click', function (event) {
        console.log(select.value);
        console.log(select.options[select.selectedIndex].text);
        document.getElementById('output').innerHTML = select.options[select.selectedIndex].text;
      });

      //output
      function displayOutput() {
        var monsterManual = "it didn't work";
        var select = document.getElementById('optselect');

        console.log(select.value);

        if (select.value === '2') {
            monsterManual = "it worked";
        }
        else if (select.value === '3') {
            monsterManual = "worked again";
        }
        else if (select.value ==='1') {
            monsterManual = "it kinda worked";
        }
        //end of the if/else if
        document.getElementById('output').innerHTML = monsterManual;
        console.log(monsterManual);
        }

    </script>
  </body>
</html>

Does this help? https://stackoverflow.com/questions/4029281/get-drop-down-value — stoic_monk, Feb 18 '18 at 03:38
That's basically what I'm looking for, but only half of it. I want to know the value selected, as well as correlate that value to a string, then print that string out, all in the same function. — Carl Castle, Feb 18 '18 at 03:44
The value of the dropdown is the string itself.. That is what you're looking for. If you want additional help on what to do with the value, you should put that in your question. — stoic_monk, Feb 18 '18 at 03:50
It's very cluttered and messy, I'm still just learning, and there's probably something really stupid easy that nobody's asked about because it's just common knowledge, but that's everything within my tags. — Carl Castle, Feb 18 '18 at 04:01

score 0 · Accepted Answer · answered Feb 18 '18 at 04:17

<!doctype html>
<html>
  <body>
    <select id="optselect">
      <option selected="selected" value="1">Hello</option>
      <option value="2">World</option>
      <option value="3">Yoyoma</option>
    </select>
    <div id="output"></div>
    <button id="bigbutton">Gogo</button>
    <script>
      var button = document.getElementById('bigbutton');
      var select = document.getElementById('optselect');

      button.addEventListener('click', function (event) {
        console.log(select.value);
        console.log(select.options[select.selectedIndex].text);
        document.getElementById('output').innerHTML = select.options[select.selectedIndex].text;
      });
    </script>
  </body>
</html>

This is really close to what I'm looking for, being able to detect what's in the dropdown and respond based on that, I want to have a variable set to equal a string. Maybe set it to initally be 'var text = 0' then have a massive if/else/else to set the value of var text to whatever string is already in. Like "if value === 1 {var text = 'one'} else if value === 2 {var text = 'two'}" and so forth for about 50-60 different strings. I don't really know if that's possible to have an if/else if like that, or if my syntax is horribly wrong. Again, I barely know this stuff. Thanks for being so patient — Carl Castle, Feb 18 '18 at 13:20

How would I use output from a dropdown with javascript?

1 Answers1