Question

我修改了一个在网上找到的非常简单的计算表格。结果在此处按预期工作：http://kosherhealthfitness.com/khf/fitness-activities/injury-prevention/bike-pain.html，如下所示：

 <!--Calculator Form-->
     <form id="symptomChecker" oninput="updateSource()">
     <select class="symptoms" id="painType" name="painType" onchange="updateSource()">
       <option value="0">Select</option>
       <option value="1">Foot/Ankle</option>
       <option value="2">Knee</option>
       <option value="3">Hip</option>
       <option value="4">Back</option>
       <option value="5">Shoulder</option>
       <option value="6">Hand</option>
     </select> 
     <output class="symptoms" id="painSource" name="painSource">Possible Sources: </output>
     </form> 
     <!--End Calculator Form-->

使用以下脚本：

<script>
    function updateSource() { 
            //get form
        var form = document.getElementById("symptomChecker");
            //get output
        var out = form.elements["painSource"];
        var painArea = parseInt(form.elements["painType"].value);
            //set output depending on painArea
        switch(painArea)
        {
            //Select
            case 0:
            out.value = "Ouch";
            break;
            //Foot
            case 1: out.value = "Ouch Foot";
            break;
            //Knee
            case 2: out.value = "Ouch Knee";
            break;
            //Hip
            case 3: out.value = "Ouch Hip";
            break;
            //Back
            case 4: out.value = "Ouch Knee"
            break;
            //Shoulder
            case 5: out.value = "Ouch Shoulder"
            break;
            //Hand
            case 6: out.value = "Ouch Hand"
            break;

            default:
            break;
        }
    }

    </script>

我要做的是在out.value中添加一些html，可能还有css。例如，我需要换行符，以便我可以使用一些简单的格式获取列表。我试过了和\ n，但这些只是新手的猜测。

如果没有重做整个表单，是否有一种简单的方法可以为out.value插入html和css？

Answer 1

我认为output实际上是一个表单输入标记，它的.value属性只能接受文本。它相当于在任何常规元素上设置.innerText。因此，当您在值中添加<br />标记或其他内容时，它只会成为常规文本。

我不知道使用output.value会给您带来哪些可访问性优势，但您也可以使用div或span和.innerHTML来注入HTML标记作为文本。

Answer 2

 <div class="symptoms" id="painSource" name="painSource">Possible Sources: </div>

<script>
function updateSource() {
var form = document.getElementById("symptomChecker");
var out = document.getElementById("output");
var painArea = parseInt(form.elements["painType"].value);   
 switch(painArea) { 
 case 0: 
    out.innerHTML = "Ouch";
  break;
 case 1: 
    out.innerHTML = "Ouch Foot"; 
 break; 
 default: 
 break; } } 
 </script>

Answer 3

试试这个。这对你有用。

jsfiddle link

HTML：

<select class="symptoms" id="painType" name="painType1" >
   <option value="0">Select</option>
   <option value="1">Foot/Ankle</option>
   <option value="2">Knee</option>
   <option value="3">Hip</option>
   <option value="4">Back</option>
   <option value="5">Shoulder</option>
   <option value="6">Hand</option>
 </select> 
 <output class="symptoms" id="painSource" name="painSource">Possible Sources: </output>

脚本：

$("#painType").change(function () {
    var str = "";
 str =   $( "#painType option:selected" ).text();
    $("#painSource").html("Ouch " +str );
  })

javascript输出换行符

3 个答案: