Question

我有这个代码。我希望提交的功能在提交按钮单击时运行。提交功能用于提醒选项中的值和滑块上的数字。但是，未显示滑块的编号，并且未显示警报：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;        
        default:
    }
    $('#slider').val(0);
  });
  function submited() { 
    var selectedValue = document.getElementById("slider").value;
	var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
		alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
    	var textcontent = $('#textInput').val();
    	alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
    	alert('your second value of the last option is '+ textcontent);
    
  };
}    

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>           
            <option value="optionc">c</option>  
            <option value="optiond">d</option>        
          </select>
        </p>
        <p>        
          <span id="output"></span></br>    
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>          
          <span id="output"></span></br>    
          <input type="submit" onclick="submited()" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

请参阅代码段，您可以了解我的问题。

感谢任何帮助。非常感谢。

Answer 1

我发现您的代码有几处错误：

在定义}功能

onload

您的功能范围错误 - 将它们从onload功能中移除并将它们置于全局范围内
将您的HTML按钮更改为type="button"，因为在这种情况下您没有提交表单。
你应该抓住#Main selectedValue，而不是#slider。
在您的<select> onchange中，您正在调用不存在的函数changeRange。删除onchange属性。

进行这些更改后，您将获得正常工作的代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({ 
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;        
        default:
    }
    $('#slider').val(0);
  });   

};

	function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

  function submited() { 
  
    console.log("submitted");
    
    var selectedValue = document.getElementById("Main").value;
	  var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
		alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
    	var textcontent = $('#textInput').val();
    	alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
    	alert('your second value of the last option is '+ textcontent);
    
  	};
  }	 

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>           
            <option value="optionc">c</option>  
            <option value="optiond">d</option>        
          </select>
        </p>
        <p>        
          <span id="output"></span><br>    
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>          
          <span id="output"></span><br>    
          <input type="button" onclick="submited();" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

＆＃13;

Answer 2

更改您的专线var selectedValue = document.getElementById("slider").value; 这一个var selectedValue = document.getElementById("Main").value;

它应该给你预期的输出

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
window.onload = function() {
    //Range
    var val = $('#slider').val();
    output = $('#output');
    output.html(val);

    $('#slider').on('change', function() {
      output.html(this.value);
    });

    function showSlider() {
      $('#slider').show();
      $('#textInput').hide();
      output.html('0');
    }

    function showTextInput() {
      $('#slider').hide();
      $('#textInput').show();
      $('#textInput').val('');
      $("#output").html('skin url');
    }

    $('#Main').change(function() {
      switch (this.value) {
        case 'optiona':
          $('#slider').prop({
            'min': 0,
            'max': 20
          });
          showSlider();
          break;
        case 'optionb':
          $('#slider').prop({
            'min': -10,
            'max': 90
          });
          showSlider();
          break;
        case 'optionc':
          showTextInput();
          break;
        case 'optiond':
          showTextInput();
          break;        
        default:
    }
    $('#slider').val(0);
  });
  function submited() { 
    var selectedValue = document.getElementById("Main").value;
	var finaloutput = $("#output").html()
    if (selectedValue != 'optionc') {
		alert(selectedValue + ' has the value ' + finaloutput);
        }
    if (selectedValue == 'optionc') {
    	var textcontent = $('#textInput').val();
    	alert('your value is '+ textcontent);
    }
    if (selectedValue == 'optiond') {
        var textcontent = $('#textInput').val();
    	alert('your second value of the last option is '+ textcontent);
    
  };
}    

</script>

  <body>
    <form>
      <fieldset>
        <legend>Options</legend>
        <p>
          <label>
            Select option:
          </label>
          <select id="Main">
          	<option value="default">select an option</option>
            <option value="optiona">a</option>
            <option value="optionb">b</option>           
            <option value="optionc">c</option>  
            <option value="optiond">d</option>        
          </select>
        </p>
        <p>        
          <span id="output"></span></br>    
          <input type="range" min="0" max="9000" id="slider" value="0" name="range" style="display: inline-block;width: 150px">
          <textarea id="textInput" style="display: none; width: 259px; margin: 0px; height: 15px;"></textarea>          
          <span id="output"></span></br>    
          <input type="submit" onclick="submited()" value="Submit" style="margin-left: 82%;" class="button" id="submitDemo"/>
        </p>
      </fieldset>
    </form>
  </body>

＆＃13;

提交按钮不执行功能

2 个答案: