Option Form tag not engaging JavaScript

Question

So I have four buttons when I click they all change the innerHTML on the player id - But I am unable to get my drop-downs to work and have them function as the buttons.

Example: When I click on the EXCEL button on the bottom, it transforms to 'Testing 2' but I would also like to have it when I change to the 'EXCEL' drop-down that it also shows 'Testing 2' but the javascript can't seem to read the onchange or that I'm not properly calling it - Does anyone know what I might be doing wrong? Would love all the help that I can get on this.

Clicking on RUN CODE SNIPPET will demonstate the full code in functioning format and non-functioning format.

 var tabButtons = document.querySelectorAll('#options > button'); var tabButtons = document.querySelectorAll('#rChoices > option'); var player = document.getElementById('player'); function videoSelect(element){ if (element === "word"){ player.innerHTML = '<p>Testing 1</p>'; } if (element === "excel"){ player.innerHTML = '<p>Testing 2</p>'; } if (element === "powerpoint"){ player.innerHTML = '<p>Testing 3</p>'; } if (element === "onenote"){ player.innerHTML = '<p>Testing 4</p>'; } } 

 @media screen and (min-width: 768px) { .modal-dialog { width: 900px; width: 850px; } .modal-content { height: 650px; } .modal-body { height: 460px; overflow-y: auto; } } .FT-main-category { /* Display and Box Model */ margin-top: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid #8e908f; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; /* Color */ background-color: #f1f1f1; } .FT-main-header { /* Display and Box Model */ margin-top: -12px; margin-right: -12px; margin-bottom: 8px; margin-left: -12px; padding: 12px; /* Color */ background-color: #8e908f; color: #f1f1f1; /* Text */ font-family: Calibri, sans-serif; font-size: 18pt; } .modal-footer { margin-top: 0px; } .ms-rtestate-field p { margin-bottom: 0px; } #x { float: right; padding-right: 10px; } #small { font-size: 16px; } blockquote { margin-bottom: 0px; } #submit { border-radius: 4px!important; } .ext, #both1 { display: none; } .form-group { margin-bottom: 5px; width: 450px; } .form { padding-left: 0px; padding-right: 0px; } #hidden_div { padding-top: 30px; text-align: center; } h2 { font-size: 2rem!important; } .groupName, .totalUsers /* teamName, userCount */ { display: none; } .row .row { margin-left: 0px!important; } h7 { font-size: 1.00rem!important; } h6 { font-size: 1.1rem; font-weight: bold!important; } #documents, .buttons, .rType, #rText, .rEmail, .groupName, .totalUsers { text-align: left; } #rText { font-size: large; padding-right: 125px; } #mText { font-size: large; } .container { padding-right: 20px; } .container, .col-md-12 { padding-left: 0px!important; } #mTextIndent, #stepHeaders { padding-left: 5px!important; } #stepHeaders { font-size: 1.1rem!important; } #documents img { padding:0px 7px 5px 5px!important; } #documents h6 { margin-bottom: .8rem!important; } #comp { float: left!important; } 

 <div class="container"> <div class="row submitHide"> <div class="col-md-6"> <form id="form" data-toggle="validator" novalidate="true"> <fieldset> <div class="container form"> <h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Application Request Form</h4> <br/> <div class="form-group row rChoices"> <label for="rChoices" class="col-form-label">Please choose a application below:</label><select class="form-control" id="rChoices" onchange="videoSelect(this.id)"> <option class="" selected disabled>---------</option> <option class="word" id="word" onchange="videoSelect(this.id)">Word</option> <option value="excel" id="excel" onchange="videoSelect(this.id)">Excel</option> <option value="powerpoint" id="powerpoint" onchange="videoSelect(this.id)">PowerPoint</option> <option value="onenote" id="onenote" onchange="videoSelect(this.id)">OneNote</option> </select><div class="help-block with-errors"></div> </div> <div class="form-group row buttons"> <button type="submit" name="singlebutton" class="btn btn-success" id="submit"> Submit</button> <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/EmailRetention.aspx'"> Cancel</button> </div> </div> </fieldset> </form> </div> <div class="col-md-6"> <div class="test"> <h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Documentation</h4> <br/> <div class="row"> <div id="options"> <button type="button" id="word" onclick="videoSelect(this.id)">Word</button> <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button> <button type="button" id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button> <button type="button" id="onenote" onclick="videoSelect(this.id)">OneNote</button> </div> </div> <div id="player"> <p>Please select one of the applications from the drop-down to the left to view more information and documentation on Office 365 applications.</p> </div> </div> </div> </div> </div> 

Answer 1

Try using this.value for passing into the videoSelect function eg onclick="videoSelect(this.value)" within your select rChoices tag. Also, you're missing the option value for "word" on your first select option. You also only need onChange on the select tag, not on all of the option tags.

Alternatively, you could update your buttons to also have value="word" etc. with the same value as the ids, and then pass this.value to your videoSelect function there as well, for sake of consistency if you wanted..

 var tabButtons = document.querySelectorAll('#options > button'); var tabButtons = document.querySelectorAll('#rChoices > option'); var player = document.getElementById('player'); function videoSelect(element) { // console.log(element); if (element === "word") { player.innerHTML = '<p>Testing 1</p>'; } if (element === "excel") { player.innerHTML = '<p>Testing 2</p>'; } if (element === "powerpoint") { player.innerHTML = '<p>Testing 3</p>'; } if (element === "onenote") { player.innerHTML = '<p>Testing 4</p>'; } } 

 @media screen and (min-width: 768px) { .modal-dialog { width: 900px; width: 850px; } .modal-content { height: 650px; } .modal-body { height: 460px; overflow-y: auto; } } .FT-main-category { /* Display and Box Model */ margin-top: 12px; margin-bottom: 12px; padding: 12px; border: 1px solid #8e908f; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; /* Color */ background-color: #f1f1f1; } .FT-main-header { /* Display and Box Model */ margin-top: -12px; margin-right: -12px; margin-bottom: 8px; margin-left: -12px; padding: 12px; /* Color */ background-color: #8e908f; color: #f1f1f1; /* Text */ font-family: Calibri, sans-serif; font-size: 18pt; } .modal-footer { margin-top: 0px; } .ms-rtestate-field p { margin-bottom: 0px; } #x { float: right; padding-right: 10px; } #small { font-size: 16px; } blockquote { margin-bottom: 0px; } #submit { border-radius: 4px!important; } .ext, #both1 { display: none; } .form-group { margin-bottom: 5px; width: 450px; } .form { padding-left: 0px; padding-right: 0px; } #hidden_div { padding-top: 30px; text-align: center; } h2 { font-size: 2rem!important; } .groupName, .totalUsers /* teamName, userCount */ { display: none; } .row .row { margin-left: 0px!important; } h7 { font-size: 1.00rem!important; } h6 { font-size: 1.1rem; font-weight: bold!important; } #documents, .buttons, .rType, #rText, .rEmail, .groupName, .totalUsers { text-align: left; } #rText { font-size: large; padding-right: 125px; } #mText { font-size: large; } .container { padding-right: 20px; } .container, .col-md-12 { padding-left: 0px!important; } #mTextIndent, #stepHeaders { padding-left: 5px!important; } #stepHeaders { font-size: 1.1rem!important; } #documents img { padding: 0px 7px 5px 5px!important; } #documents h6 { margin-bottom: .8rem!important; } #comp { float: left!important; } 

 <div class="container"> <div class="row submitHide"> <div class="col-md-6"> <form id="form" data-toggle="validator" novalidate="true"> <fieldset> <div class="container form"> <h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Application Request Form</h4> <br/> <div class="form-group row rChoices"> <label for="rChoices" class="col-form-label">Please choose a application below:</label> <select class="form-control" id="rChoices" onchange="videoSelect(this.value)"> <option class="" selected disabled>---------</option> <option value="word" id="word">Word</option> <option value="excel" id="excel">Excel</option> <option value="powerpoint" id="powerpoint">PowerPoint</option> <option value="onenote" id="onenote">OneNote</option> </select> <div class="help-block with-errors"></div> </div> <div class="form-group row buttons"> <button type="submit" name="singlebutton" class="btn btn-success" id="submit"> Submit</button> <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/EmailRetention.aspx'"> Cancel</button> </div> </div> </fieldset> </form> </div> <div class="col-md-6"> <div class="test"> <h4 style="margin-bottom: 0px; text-align: center!important; float: none;">Documentation</h4> <br/> <div class="row"> <div id="options"> <button type="button" id="word" onclick="videoSelect(this.id)">Word</button> <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button> <button type="button" id="powerpoint" onclick="videoSelect(this.id)">PowerPoint</button> <button type="button" id="onenote" onclick="videoSelect(this.id)">OneNote</button> </div> </div> <div id="player"> <p>Please select one of the applications from the drop-down to the left to view more information and documentation on Office 365 applications.</p> </div> </div> </div> </div> </div>