Испытание: через тернии к звёздам. Противный ползунок!)))

Курсы §21. Формы, часть 2
1

Всем привет! Может, подскажете, что происходит с ползунком? Стоит на 10, выводит значение “10” через output, а на проверке сбрасывается и показывает результат совершенно другой! Этот 1% не дает мне покоя)))

2019-02-03%20at%2017-47-34
2019-02-03 at 17-47-34.png1432×773 149 KB
![
2019-02-03%20at%2018-00-17
2019-02-03 at 18-00-17.png1504×761 138 KB

2019-02-03%20at%2018-31-41

2

задайте ползунку value="10", чтобы это было дефолтным значением

3

Когда ползунку задаю value=“10”, то в окне output не отображается “10”. Можно, конечно, и output задать value=“10”, но на мой взгляд, это неправильно. Я и так цвет кроватки через value задала, потому что тоже “слетал”, как ползунок… Выходит, нужно изуродовать работающий код, чтобы получился тупо “скрин” на 100%))

4

так, давайте код нормально на базу, что у вас получилось. ничего не понятно что вы написали.

5

<main>
<form action="/echo" method=“post”
oninput=“ratingoutput.value=rating.value”>
<fieldset>
<legend>Личные данные</legend>
<div class=“half-width”>
<label for=“id”>ID отзыва</label>
<input type=“text” value=“12345” disabled>
</div>
<div class=“half-width”>
<label for=“name”>Имя путешественника</label>
<input type=“text” value=“Кекс”>
</div></fieldset>
<fieldset>
<legend>Отзыв о поездке</legend>
<div class=“half-width”>
<label for=“country”>Страна визита</label>
<input type=“text” value=“Норвегия”>
</div>
<div class=“half-width”>
<label for=“city”>Город</label>
<select name=“city” id=“city”>
<option selected>Осло</select>
</div>
<div class=“half-width”>
<label for=“rating”>Оценка поездки</label>
0 <input type=“range” min=“0” max=“10” name=“rating” id=“rating”> 10
</div>
<div class=“half-width output-area”>
<output name=“ratingoutput” ></output>
</div>
<label for=“review”>Текст отзыва</label>
<textarea id=“review” name=“review” rows=“5”>Это было просто мяу!</textarea>
</fieldset>
<fieldset>
<legend>Оценка отеля</legend>
<div class=“half-width”>
<label for=“hotel”>Название отеля</label>
<input type=“text” placeholder=“Название по-английски”>
</div>
<div class=“half-width”>
<label for=“arrival_date”>Дата въезда</label>
<input type=“text” placeholder=“В формате дд-мм-гггг”>
</div>
<div class=“one-third-width”>
<label for=“color”>Цвет кроватки</label>
<input type=“color” value="#ff0000">
</div>
<div class=“two-third-width”>
<label for=“dish_rating”>Оценка обедов</label>
<select id=“dish_rating” name=“dish_rating”>
<option value=“nice”>Подушечки оближешь</option></select>
</div>
<label for=“fish”>Самая вкусная рыба</label>
<select id=“fish” name=“fish” multiple size=“5”>
<option selected>Норвежский лосось</option>
<option>Зубатка</option>
<option selected>Морской окунь</option>
<option>Карась</option>
<option>Зеркальный карп</option></select>
</fieldset>
<div class=“buttons”>
<input type=“submit” value=“Оценить”>
<input type=“reset” value=“Сбросить”>
</div>
</form>
</main>`

6

<input type=“range” min=“0” max=“10” name=“rating” id=“rating” value=“10”>
<output name=“ratingoutput” >10</output>

исправляем и вуаля =)

значение внутри output выйдет все равно динамическим, мы ничего не уродуем, а задаем дефолтные значения, это нормально.

7

да знаю я, как “подогнать” код под скрин! но это неправильно!!! можно тогда, вообще, не использовать типы полей, а гнать type=“text”. Мой код работает!! Ползунок ползает, в output высвечивается корректное значение! Но при проверке почему-то вылазит баг! Или ошибка в моем коде? Это я и хочу понять)

8

у вас не отображается в окошке оутпута ничего по дефолту. а должно быть 10. и ползунок по дефолту стоит посередине, а должен в крайнем правом положении.

9

прошу прощения, что такое дефолт?

10

по-умолчанию, то как оно открывается у пользователя при загрузке страницы

1 лайк
11

щас попробую

12

Вы будете смеяться, но все равно 99%)))

13

у вас считыватель завис значит, обновите страницу и снова попробуйте. потому что у меня ваш исправленный код на 100% прошел.

а понял, вы решили скопировать код который я вам показал - форум меняет форматирование многих элементов, один из них кавычки, он их меняет в английском стиле. на самом деле я так написал, чтобы вы увидели болд в тексте и чтобы прочувствовали боль, когда неправильно копируете на форум, даже имея гифку подсказку
сделайте ручками.

1 лайк
14

все! совладала))) 100%

15

Спасибо за помощь!

16

да! я это заметила после минутного замешательства))) и исправила! еще раз СПАСИБО!
кстати! я попыталась сделать, как в гифке, но… вылезли всякие &&& и т.д.
попытка №2!
<main>
<form action="/echo" method=“post”
oninput=“ratingoutput.value=rating.value”>
<fieldset>
<legend>Личные данные</legend>
<div class=“half-width”>
<label for=“id”>ID отзыва</label>
<input type=“text” value=“12345” disabled>
</div>
по-моему, опять не вышел каменный цветок :joy:

17

если совсем ну никак, попробуйте в начало и конец кода поставить машинописный обратный апостроф. он находится на букве ё в английской раскладке. ( ` )

18 
`&lt;main&gt;
&lt;form action="/echo" method="post"
oninput="ratingoutput.value=rating.value"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Личные данные&lt;/legend&gt;
&lt;div class="half-width"&gt;
&lt;label for="id"&gt;ID отзыва&lt;/label&gt;
&lt;input type="text" value="12345" disabled&gt;
&lt;/div&gt;``

упс



Личные данные


ID отзыва


ойц! это из курсов)))) и новые сообщения я сегодня больше не могу создавать!
<main> <form action="/echo" method="post" oninput="ratingoutput.value=rating.value"> <fieldset> <legend>Личные данные</legend> <div class="half-width"> <label for="id">ID отзыва</label> <input type="text" value="12345" disabled> </div>
о! усе сделано, шеф! :sunglasses:
помог

спасибо снова))

19

замечательно, теперь код копируйте не с форума, а из курсов