选项表单标签未使用JavaScript

Question

因此，当我单击它们时，我有四个按钮，它们都更改了播放器ID上的innerHTML-但我无法使下拉菜单正常工作，而无法将它们用作按钮。

示例：当我单击底部的EXCEL按钮时，它会转换为“测试2”，但是当我更改为“ EXCEL”下拉菜单时也会显示“ Testing 2”，我也希望拥有它但javascript似乎无法读取onchange或我没有正确调用它-有人知道我可能在做错什么吗？希望我能为此提供所有帮助。

单击“运行代码片段”将以功能格式和非功能格式演示完整代码。

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

尝试使用this.value传递到videoSelect函数，例如onclick="videoSelect(this.value)" select标签内的rChoices。另外，您在第一个选择选项上缺少“ {word}”的option值。您还只需要在onChange标记上使用select，而不需要在所有option标记上使用。

或者，您可以将buttons更新为也包含value="word"等，其值与id相同，然后将this.value传递给您的videoSelect函数，如下所示：好吧，如果想要的话，为了保持一致性。

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>