2016-03-09 2 views
1

У меня есть HTML-код с JavaScript. Я установил форму для печати на консоль. Моя проблема в том, что когда он печатает несколько вариантов или флажков, он по-прежнему печатает запятую после последнего выбора. Пример «красный, белый», я хотел бы, чтобы запятая после белого не печаталась. Просьба сообщить, как избавиться от последней запятой. Спасибо заранеепечать формы JavaScript на консоль

<!DOCTYPE html> 

<html> 
<head> 
    <title>Extra Credit</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script type="text/javascript"> 

     function onConsole() 
     { 
      var select = document.getElementById('colorSelect').value; 
      console.log("Drop-Down: " + select); 

      var a = " "; 
      var multi = document.getElementsByName('multiColor') 
       for(i=0; i < multi.length; i++) 
       { 
        if(multi[i].selected === true) 
        { 
         a = a + multi[i].value + ", "; 
        } 
       } 
       console.log("Multi-Select: " + a); 

       var b = " "; 
       var box = document.getElementsByName('checkboxColor') 
       for(i = 0; i < box.length; i++) 
       { 
        if(box[i].checked === true) 
        { 
         b = b + box[i].value + ", "; 
        } 
       } 
       console.log("Checkboxes: " + b); 

      var radio = document.getElementsByName('radioColor') 
       for(i=0; i < radio.length; i++) 
       { 
        if(radio[i].checked === true) 
        { 
         console.log("Radio Button: " + radio[i].value); 
        } 
       }    

      var text = document.getElementById('textArea').value; 
      console.log("Text Area: " + text); 
     } 
    </script> 

</head> 
<body>  

    <form name= "ColorForms" action="InClass.html" method="post" onSubmit="onConsole()"> 

     <select id="colorSelect"> 
      <option>Choose a Color</option> 
      <option value="red">red</option> 
      <option value="white">white</option> 
      <option value="blue">blue</option> 
      <option value="orange">orange</option> 
     </select> 

     <br><br> 

     <select multiple> 
      <option value="red" name="multiColor">red</option> 
      <option value="white" name="multiColor">white</option> 
      <option value="blue" name="multiColor">blue</option> 
      <option value="orange" name="multiColor">orange</option> 
     </select> 

     <br><br> 

     <input type="checkbox" name="checkboxColor" value="red">red<br> 
     <input type="checkbox" name="checkboxColor" value="white">white<br> 
     <input type="checkbox" name="checkboxColor" value="blue">blue<br> 
     <input type="checkbox" name="checkboxColor" value="orange">orange<br> 

     <br><br> 

     <input type="radio" name="radioColor" value="red">red<br> 
     <input type="radio" name="radioColor" value="white">white<br> 
     <input type="radio" name="radioColor" value="blue">blue<br> 
     <input type="radio" name="radioColor" value="orange">orange<br>  

     <br><br> 

     <textarea rows="4" cols="50" id="textArea"></textarea> 

     <br> 

     <input type="submit" value="Submit"> 
    </form> 
</body> 
</html> 
+1

Не добавляйте '', '' когда 'i === box.length - 1'. –

+0

Поместите все в массив и используйте 'array.join (',')', чтобы сделать список, разделенный запятыми. – Barmar

+0

'if (multi [i] .selected === true && i === multi.length-1) {a = a + multi [i] .value;}' –

ответ

1

В общем, что вы делаете сейчас

var array = ['a', 'b', 'c'], str = ''; 
for (var i = 0; i < array.length; i++) { 
    str += array[i] + ', '; 
} 

и Каус это добавляет запятую после каждого элемента, включая последний.

Вы, вероятно, следует использовать метод join массива, который вставляет строку между элементами, как:

var array = ['a', 'b', 'c'], 
    str = array.join(', '); 

или ближе к вашему делу

var multi = document.getElementsByName('multiColor'), 
    values = Array.from(multi).filter(function (el) { 
     return el.selected; 
    }).map(function (el) { 
     return el.value; 
    }), 
    a = values.join(', '); 
console.log("Multi-Select: " + a); 
0

Вы можете обрезать запятая от конца ваших строк, как ниже.

Или вы не смогли добавить последнюю запятую в первую очередь, используя код ниже. Любой вариант будет работать нормально. Если вы не зацикливаете сотни предметов, в этом случае обрезание последней запятой из строки после цикла будет наиболее эффективным.

a = a + multi[i].value + (i===multi.length ? "":", "); 
+0

Эта опция работала очень хорошо для нескольких выборов. За исключением одного выбора, он показывает запятую – Avi

+0

Спасибо за помощь. У меня было много отличных результатов – Avi

Смежные вопросы