Javascript команда «возврат» удваивает себя непреднамеренно

Question

У меня есть следующая проблема:

Я пытался, внутри общей страницы HTML, смешанной с некоторыми Javascript, написать простую программу так, чтобы указанный c div был заполнен результат функции.

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

My код внутри тела:

<div id="div1"></div>

<script>
let tab = "";

function result(text) {
for (i in text) {
tab += '-';
}
return "<p>" + tab + "<br>" + text + "</p>";
}

document.getElementById("div1").innerHTML = result("Bear") + result("Bear") + result("Bear");
</script>

Рендеринг HTML возвращает следующий результат:

Только первый вызов функции работает как положено: 4 тире по 4 буквы. Но второй вызов отображает вдвое больше тире, а третий - в три раза.

Возможно, «return» - это не команда для использования?

Answer 1

Вы только задаете tab пустую строку в начале программы.

Вы не устанавливаете пустую строку внутри function.

Таким образом, он никогда не получит сброс в пустую строку.

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

Если вы хотите сбрасывать его каждый раз, когда вызывается функция, сбросьте ее внутри функции.