Size: a a a

JavaScript — русскоговорящее сообщество

2020 October 14

D

Danila in JavaScript — русскоговорящее сообщество
<form id="myForm">
   <p>Бруньки бувають:</p>
   <label>
     <input type="checkbox" name="q1" value="a">Ростові
   </label>
   <label>
     <input type="checkbox" name="q1" value="b">Нестатеві
   </label>
   <label>
     <input type="checkbox" name="q1" value="c">Вегетативні
   </label>
   <label>
     <input type="checkbox" name="q1" value="d">Репродуктивні
   </label>
   <input type="submit" value="Отправить">
 </form>
 <output id="result"></output>
 
 
 <script type="text/javascript">
   const form = document.querySelector('#myForm');
   const output = document.querySelector('#result');
   
   form.addEventListener('submit', event => {
     event.preventDefault();
     let correctAnswers = 0;
     
     const checkedBoxes = form.querySelectorAll('input[type="checkbox"]:checked');
     Array.from(checkedBoxes).forEach(box => {
       if(box.value === 'a' || box.value === 'b') correctAnswers+=1;
     });
     
     output.innerHTML = `Вы дали ${correctAnswers} правильных ответов`
   })
   
   
 </script>
</body>
источник

VP

Vitaliy Ponomarev in JavaScript — русскоговорящее сообщество
Pasha Pavlenko
то что видел в Ютубе, то и писал)
лучше смотреть в справочники, хотя бы вот такие

http://htmlbook.ru/html/input
http://learn.javascript.ru/

а потом уже и на MDN можно перейти https://developer.mozilla.org/ru/
источник

VP

Vitaliy Ponomarev in JavaScript — русскоговорящее сообщество
Pasha Pavlenko
а что тебе не нравится в первом?
http://htmlbook.ru/html/attr/onclick
http://htmlbook.ru/html/attr/onsubmit

нажатие на кнопку это не отправка формы, а здесь именно отправка формы нужна семантически.
источник

PP

Pasha Pavlenko in JavaScript — русскоговорящее сообщество
Vitaliy Ponomarev
лучше смотреть в справочники, хотя бы вот такие

http://htmlbook.ru/html/input
http://learn.javascript.ru/

а потом уже и на MDN можно перейти https://developer.mozilla.org/ru/
ок, понял, спасибо
источник

ب

بلال ابن اجاد... in JavaScript — русскоговорящее сообщество
Danila
<form id="myForm">
   <p>Бруньки бувають:</p>
   <label>
     <input type="checkbox" name="q1" value="a">Ростові
   </label>
   <label>
     <input type="checkbox" name="q1" value="b">Нестатеві
   </label>
   <label>
     <input type="checkbox" name="q1" value="c">Вегетативні
   </label>
   <label>
     <input type="checkbox" name="q1" value="d">Репродуктивні
   </label>
   <input type="submit" value="Отправить">
 </form>
 <output id="result"></output>
 
 
 <script type="text/javascript">
   const form = document.querySelector('#myForm');
   const output = document.querySelector('#result');
   
   form.addEventListener('submit', event => {
     event.preventDefault();
     let correctAnswers = 0;
     
     const checkedBoxes = form.querySelectorAll('input[type="checkbox"]:checked');
     Array.from(checkedBoxes).forEach(box => {
       if(box.value === 'a' || box.value === 'b') correctAnswers+=1;
     });
     
     output.innerHTML = `Вы дали ${correctAnswers} правильных ответов`
   })
   
   
 </script>
</body>
Lebel необязательно писать оно вообще определяет заголовок формы а что все это было через строкой вниз необходимо написать тег <br/>
источник

PP

Pasha Pavlenko in JavaScript — русскоговорящее сообщество
Danila
<form id="myForm">
   <p>Бруньки бувають:</p>
   <label>
     <input type="checkbox" name="q1" value="a">Ростові
   </label>
   <label>
     <input type="checkbox" name="q1" value="b">Нестатеві
   </label>
   <label>
     <input type="checkbox" name="q1" value="c">Вегетативні
   </label>
   <label>
     <input type="checkbox" name="q1" value="d">Репродуктивні
   </label>
   <input type="submit" value="Отправить">
 </form>
 <output id="result"></output>
 
 
 <script type="text/javascript">
   const form = document.querySelector('#myForm');
   const output = document.querySelector('#result');
   
   form.addEventListener('submit', event => {
     event.preventDefault();
     let correctAnswers = 0;
     
     const checkedBoxes = form.querySelectorAll('input[type="checkbox"]:checked');
     Array.from(checkedBoxes).forEach(box => {
       if(box.value === 'a' || box.value === 'b') correctAnswers+=1;
     });
     
     output.innerHTML = `Вы дали ${correctAnswers} правильных ответов`
   })
   
   
 </script>
</body>
спасибо, за ответ, только вот если я хочу второй тест сделать радио, оно будет работать
источник

D

Danila in JavaScript — русскоговорящее сообщество
بلال ابن اجاد
Lebel необязательно писать оно вообще определяет заголовок формы а что все это было через строкой вниз необходимо написать тег <br/>
лейбл обязателен хотя бы для того, чтобы активным был и лейбл и сам чекбокс. А переносить что-то brами плохая практика
источник

D

Danila in JavaScript — русскоговорящее сообщество
Pasha Pavlenko
спасибо, за ответ, только вот если я хочу второй тест сделать радио, оно будет работать
Лучше сразу сделать сборщик данных с формы, если ты планируешь развивать эту идею и делать более сложные формы
источник

ب

بلال ابن اجاد... in JavaScript — русскоговорящее сообщество
Danila
лейбл обязателен хотя бы для того, чтобы активным был и лейбл и сам чекбокс. А переносить что-то brами плохая практика
Ну зачем себя мучить .
источник

D

Danila in JavaScript — русскоговорящее сообщество
بلال ابن اجاد
Ну зачем себя мучить .
Мучить? Чем?
источник

ب

بلال ابن اجاد... in JavaScript — русскоговорящее сообщество
Danila
Мучить? Чем?
Ну каждый раз лейбл писать
источник

VP

Vitaliy Ponomarev in JavaScript — русскоговорящее сообщество
بلال ابن اجاد
Lebel необязательно писать оно вообще определяет заголовок формы а что все это было через строкой вниз необходимо написать тег <br/>
семантическая разметка страницы более правильный вариант по сравнению с переносами с помощью br, дизайн проще потом привязывать (хоть в строку всё, хоть в столбец, хоть адаптивно)
источник

D

Danila in JavaScript — русскоговорящее сообщество
بلال ابن اجاد
Ну каждый раз лейбл писать
Потому что иначе получится неюзабельная форма.
источник

D

Danila in JavaScript — русскоговорящее сообщество
Ставить лейблы и связывать их с инпутами - это база UX, и никаких мучений тут нет. Жизнь и работа тогда вообще мучение, если так рассуждать.
источник

VY

Vladimir Yefremov in JavaScript — русскоговорящее сообщество
Vitaliy Ponomarev
семантическая разметка страницы более правильный вариант по сравнению с переносами с помощью br, дизайн проще потом привязывать (хоть в строку всё, хоть в столбец, хоть адаптивно)
а какой применить элемент тут семантически правильно?
<li> ?
источник

VP

Vitaliy Ponomarev in JavaScript — русскоговорящее сообщество
Vladimir Yefremov
а какой применить элемент тут семантически правильно?
<li> ?
"тут" это где? в данном примере? выше уже разобрали, label + input. это же форма а не список.

всё остальное стилями решается, никакие там br не нужны
источник

VY

Vladimir Yefremov in JavaScript — русскоговорящее сообщество
Vitaliy Ponomarev
"тут" это где? в данном примере? выше уже разобрали, label + input. это же форма а не список.

всё остальное стилями решается, никакие там br не нужны
label + input - да, согласен,
думал - ты имеешь в виду - надо во что-то обернуть, чтобы без <br>

понятно, что бр - это ерунда
источник

ب

بلال ابن اجاد... in JavaScript — русскоговорящее сообщество
Vitaliy Ponomarev
"тут" это где? в данном примере? выше уже разобрали, label + input. это же форма а не список.

всё остальное стилями решается, никакие там br не нужны
Каму как удобно
источник

VL

V. Lavrinovics 🇦🇹... in JavaScript — русскоговорящее сообщество
Подскажите сайт на котором можно было вписать код и отследить постепенно всю работу скрипта
источник

D

Danila in JavaScript — русскоговорящее сообщество
بلال ابن اجاد
Каму как удобно
Есть понятие "плохих практик". Код ты пишешь не для себя, и поэтому "кому как удобно" тут не работает.
источник