如何将和的答案显示为文本而不是输入字段

Question

我尝试将sum的结果显示为文本而不是输入字段，为什么这不适用于＆lt; span id =“result”＆gt;＆lt; /跨度＆GT; ？ （没有空格） 我希望有人可以帮助我

这是我的工作代码，这里只是输入字段中的答案：

   <div class="form-group">
    <label for="getal1">getal1 * </label>
    <select id="getal1" name="getal1" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="4">4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>  
    </select>
	</div>
   <div class="form-group">
    <label for="getal2">getal2 * </label>
    <select id="getal2" name="getal2" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="0">0</option>
      <option value='5'>5</option>  
    </select>
	</div>
	
	
<div class="form-group">

<input type="text" id="result" name="result" class="form-control required">
                          </div>
	
	<script>
     function sum()
     {

        var number1 = document.getElementById('getal1').value;
        var number2 = document.getElementById('getal2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }

     }
  </script>

Answer 1

因为 span没有财产value 。 对于非表单元素，请使用innerHTML

// Your code .....

document.getElementById('result').innerHTML = num3;

您也可以优化您的功能

function sum() {

    var number1 = parseInt(document.getElementById('getal1').value) || 0;
    var number2 = parseInt(document.getElementById('getal2').value) || 0;

    document.getElementById('result').innerHTML = number1 + number2;
}

Answer 2

如果您想使用此document.getElementById('result').innerHTML代替document.getElementById('result').value，则可以使用。

＆＃13;

＆＃13;

   <div class="form-group">
    <label for="getal1">getal1 * </label>
    <select id="getal1" name="getal1" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="4">4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>  
    </select>
	</div>
   <div class="form-group">
    <label for="getal2">getal2 * </label>
    <select id="getal2" name="getal2" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="0">0</option>
      <option value='5'>5</option>  
    </select>
	</div>
	
	
<div class="form-group">

<span id="result"></span>
                          </div>
	
	<script>
     function sum()
     {

        var number1 = document.getElementById('getal1').value;
        var number2 = document.getElementById('getal2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML = num3;
        }

     }
  </script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<div class="form-group">
    <label for="getal1">getal1 * </label>
    <select id="getal1" name="getal1" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="4">4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>  
    </select>
	</div>
   <div class="form-group">
    <label for="getal2">getal2 * </label>
    <select id="getal2" name="getal2" class="form-control required" onchange="sum()">
      <option value="">Kies formaat</option>
      <option value="0">0</option>
      <option value='5'>5</option>  
    </select>
	</div>
	
	
<div class="form-group">

Result:<span id="result" name="result">0
                          </span>
	
	<script>
     function sum()
     {

        var number1 = document.getElementById('getal1').value;
        var number2 = document.getElementById('getal2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML  = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').innerHTML  = num3;
        }

     }
  </script>

请检查上面的代码段。