<?php
// Include the config file first
include_once("../includes/config.inc.php");

// Set the page variables
$page_title = "JavaScript and Select Elements";
$page_description = "A guide on how to use select elements in Javascript.";
$page_author = "Josh Knudtson";

// Then include the header (it will use the page variables above)
include_once("../includes/header.inc.php");
?>
<div class="blog-post">
    <p>In this blog I will be going over how to use JavaScript to interact with select elements. First I think it is
        important to go over what a select element is and how it can be used. A select element allows a user to select
        an item out of the choices that they are given. It is very similar to a comboBox in Visual Studio. However in this case the options must be provided through code.</p>
    <!--NFL Example Prism-->
    <h3>-NFL example:</h3>
    <pre class="language-html"><code>&lt;select id="nflChoice"> 
    &lt;option>Packers&lt;/option>
    &lt;option>Vikings&lt;/option>
    &lt;option>Bears&lt;/option>
    &lt;option>Lions&lt;/option>   
&lt;/select> </code></pre>
    <!--NFL Example that can be seen-->
    <select id="nflChoice">
        <option>Packers</option>
        <option>Vikings</option>
        <option>Bears</option>
        <option>Lions</option>
    </select>

    <p>While HTML can provide the select box it needs help for it to have any functianality. That is where JavaScript comes in. In this next example a button will be added to allow the user to select their favorite team from the options given.</p>
    <h3>NFL JavaScript example:</h3>
    <pre class="language-js"><code>const btn = document.querySelector('#btn');
    const sb = document.querySelector('#nflChoice')
    btn.onclick = (event) => {
        alert("Your favorite NFC North team is the "+sb.value+"!");
    };</code></pre>
    <button id="btn">Select your team!</button>

    <script>
        const btn = document.querySelector('#btn');
        const sb = document.getElementById("nflChoice")
        btn.onclick = (event) => {

            // show the selected team
            alert("Your favorite NFC North team is the " + sb.value + "!");
        };
    </script>

    <p>This previous example shows what is needed for a button to show the item selected from the select combobox.
        A DOM API has to be used to assign the id of both the button and the select element to constants which can then
        be used in an event. Both getElementById and querySelector can work for the last example. This could be used anywhere a combo box is needed. Whether that be selecting your favorite team, selecting the state you were born in, or selecting a color. 
    </p>
    <p>A few other notes is that the select tag has a multiple option which allows a user to select multiple choices.
        JavaScript doesn't have to return the value of the constant it can also return the selectedIndex. A value can be
        assigned to the options that can be returned. In my example I wanted the team name returned so the value option
        was excluded.</p>
</div>
	    	<!-- End of blog post -->
<?php
include_once("../includes/footer.inc.php");
?>