Форум

Jason_smith · #1 (**permalink**) 22.01.2015, 01:08

Мне нужно джава скрипт который всего лиш навсего водсчитывал valu и выводил их в в форму. но с посчётом проблем какраз и нет. Проблема в том чтоб нечекнутые инпуты обвести красной рамкой , типа напоминание пользователю что их все таки надо нажать . В разметки у меня 5 груп радио инпутов , из каждой групы хотябе один должен быть выбран , а если нет то красная рамка. Несмотря на то что звучит достаточно просто решыть эту заадачку нетак просто и инфы в нете пр это нет.

<h3> Вопрос_1 </h3>
<div>
<input type="radio" id="r1" value="1" name="vopros_1" /> <input type="radio" id="r2" value="1"/ name="vopros_1" > <input type="radio" id="r3" value="1" name="vopros_1"/> 
<br />
<label for="r1" > Ответ 1 </label> <label for="r2" > Ответ 2 </label> <label for="r3"> Ответ 3 </label>
<br />
</div>

<h3> Вопрос 2 </h3> 
<div>
<input type="radio" value="2" id="r4" name="vopros_2"/> <input type="radio" id="r5" value="2" name="vopros_2" /> <input type="radio" id="r6" value="2" name="vopros_2" />
<br />
<label for="r4"> Ответ 1 </label> <label for="r5"> Ответ 2 </label> <label for="r6"> Ответ 3 </label>
<br />
</div>

<h3> Вопрос 3 </h3>
<div>
<input type="radio" id="r7" value="3" /> <input type="radio" id="r8" value="3" /> <input type="radio" id="r9" value="3" />
<br />
<label for="r7"> Ответ 1 </label> <label for="r8"> Ответ 2 </label> <label for="r9"> Ответ 3 </label>
<br />
</div>

<h3> Вопрос 4 </h3>
<div>
<input type="radio" value="4" id="r10" /> <input type="radio" id="r11" value="4"/> <input type="radio" id="r12" value="4" />
<br />
<label for="r10"> Ответ 1 </label> <label for="r11"> Ответ 2 </label> <label for="r12"> Ответ 3 </label>
<br />
</div>

<h3> Вопрос 5 </h3>
<div>
<input type="radio" id="r13" value="5" /> <input type="radio" id="r14" value="5" /> <input type="radio" id="r15" value="5" />
<br />
<label for="r13"> Ответ 1 </label> <label for="r14"> Ответ 2 </label> <label for="r15"> Ответ 3 </label> 
<br />
</div>
<input type="button" onclick="sums()" value="Подсчитать">
<br>Сумма:<br>
<input type="text" name="sumOut" disabled="false" value="">
</form>

вот сам скрипт
function sums() {
sum=0;
for(i=1;i<16;i++) {
var elem=document.getElementById("r"+i);
if (elem.checked) {
sum=sum+parseInt(elem.value);
} else {
elem.parentNode.className += "MyClass";

}
}
document.formText.sumOut.value=sum;
}

В условие else пытался создать либо див с стилем красной рамки, либо создавал див заранее всем элементам и присваивал скриптом клас з заранее созданным стилем и не одни из этих подходов нормально не работал.

Я недавно изучаю ява-скрипт 2 недели и буду очень признателен за любую помощь в этой задачке.

рони · #2 (**permalink**) 22.01.2015, 01:36

Jason_smith,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 22.01.2015, 01:38

Jason_smith,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .MyClass {
            border: #FF0000 2px solid;
        }
    </style>
</head>

<body>
    <form name="formText" id="formText">
        <h3>Вопрос_1</h3>

        <div>
            <input type="radio" id="r1" value="1" name="vopros_1">
            <input type="radio" id="r2" value="1" name="vopros_1">
            <input type="radio" id="r3" value="1" name="vopros_1">
            <br>
            <label for="r1">Ответ 1</label>
            <label for="r2">Ответ 2</label>
            <label for="r3">Ответ 3</label>
            <br>
        </div>

        <h3>Вопрос 2</h3>

        <div>
            <input type="radio" value="2" id="r4" name="vopros_2">
            <input type="radio" id="r5" value="2" name="vopros_2">
            <input type="radio" id="r6" value="2" name="vopros_2">
            <br>
            <label for="r4">Ответ 1</label>
            <label for="r5">Ответ 2</label>
            <label for="r6">Ответ 3</label>
            <br>
        </div>

        <h3>Вопрос 3</h3>

        <div>
            <input type="radio" id="r7" value="3" name="vopros_3">
            <input type="radio" id="r8" value="3" name="vopros_3">
            <input type="radio" id="r9" value="3" name="vopros_3">
            <br>
            <label for="r7">Ответ 1</label>
            <label for="r8">Ответ 2</label>
            <label for="r9">Ответ 3</label>
            <br>
        </div>

        <h3>Вопрос 4</h3>

        <div>
            <input type="radio" value="4" id="r10" name="vopros_4">
            <input type="radio" id="r11" value="4" name="vopros_4">
            <input type="radio" id="r12" value="4" name="vopros_4">
            <br>
            <label for="r10">Ответ 1</label>
            <label for="r11">Ответ 2</label>
            <label for="r12">Ответ 3</label>
            <br>
        </div>

        <h3>Вопрос 5</h3>

        <div>
            <input type="radio" id="r13" value="5" name="vopros_5">
            <input type="radio" id="r14" value="5" name="vopros_5">
            <input type="radio" id="r15" value="5" name="vopros_5">
            <br>
            <label for="r13">Ответ 1</label>
            <label for="r14">Ответ 2</label>
            <label for="r15">Ответ 3</label>
            <br>
        </div>
        <input type="button" onclick="sums()" value="Подсчитать">
        <br> Сумма:
        <br>
        <input type="text" name="sumOut" disabled="false" value="">
    </form>
    <script>
        function sums() {
            var sum = 0,
                i, cls = "MyClass";
            for (i = 1; i < 16; i++) {
                var elem = document.getElementById("r" + i);
                if (elem.checked) {
                    sum = sum + parseInt(elem.value);
                    cls = ""
                }
                if (!(i % 3)) {
                    elem.parentNode.className = cls;
                    cls = "MyClass"
                }
            }
            document.formText.sumOut.value = sum
        };
    </script>
</body>

</html>

Jason_smith · #4 (**permalink**) 22.03.2015, 22:43

Спасибо

Форум

Справочник

Discord чат

Курсы javascript