Как правильно вывести данные с помощью document.getElementById?

233

13 февраля 2018, 09:52

Есть простая задачка, в поле человек вводит число, ему должно вывести степень этого числа с 2 по 4. Изначально вывод информации был реализован с помощью document.write. Что вызывает некие неудобства, решил реализовать это с помощью document.getElementById но столкнулся с тем, что выводится только число во второй степени, хотя с document.write такой проблемы не было, та еще и результат мгновенно пропадает. Подскажите, пожалуйста, где я неправильно прописал

<script>
function valid(form){
    var step;
    var chislo = form.chislo.value;
    var fail = false;
    if (chislo == "" || chislo == " "){
        fail= "Вести число трудно, да?";
        document.write(fail);
        return false;
    } else {
        for(step=2; step<=4; step++){
            var summa=Math.pow(chislo, step);
            document.getElementById("step").innerHTML = chislo + "<sup>" + step + "</sup>"  + " = " + summa + "; ";
            document.write(chislo + "<sup>" + step + "</sup>"  + " = " + summa + "; ");
        }
    }
}
</script>
<form action="" method="post" name="test" onsubmit="valid(this)">
    <input type="text" name="chislo" placeholder="Ваше число" id="name">
    <input type="submit" name="submit" value="Узнать степень">
</form>
<div id='step'></div>

Answer 1

Предлагаю сделать так.

Как видите, я добавил три блока с уникальным id, т.к. выводился только последняя степень (что и логично). Так же, при событии onsubmit в форме я добавил return false;.

function valid(form){ 
    var step; 
    var chislo = form.chislo.value; 
    var fail = false; 
    if (chislo == "" || chislo == " "){ 
        fail= "Вести число трудно, да?"; 
        document.write(fail); 
        return false; 
    } else { 
        for(step=2; step <= 4; step++){ 
            var summa = Math.pow(chislo, step); 
            document.getElementById(step).innerHTML = chislo + "<sup>" + step + "</sup>"  + " = " + summa + "; "; 
        } 
    } 
}

<form name="test" onsubmit="valid(this); return false;"> 
    <input type="text" name="chislo" placeholder="Ваше число" id="name"> 
    <input type="submit" name="submit" value="Узнать степень"> 
</form> 
<div id='2'></div> 
<div id='3'></div> 
<div id='4'></div>