Для цикла и innerHTML
Как заполнить текст абзацем с помощью innerHTML? Мне нужно ввести число в текстовое поле, а затем повторить какой-либо текст столько раз, сколько число, введенное в текстовое поле.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>ex10.js</title>
</head>
<body>
<input type = "text" id = "input-type" onKeyUp = "myFunction()">
<p id = "sample-text">Here is some text</p>
<script>
function myFunction() {
let count = document.getElementById("input-type").value;
document.getElementById("sample-text").innerHTML = count;
if (isNaN(count)) {
document.getElementById("sample-text").innerHTML = "Error. Not a number";
}
else {
for(int i = 0; i < count; i++) {
document.getElementById("sample-text").innerHTML = "This is some text";
}
}
}
</script>
</body>
</html>
мой плохой больше привык к C++ и java
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
document.getElementById("sample-text").innerHTML = someVar;
Это будет полностью перезаписывать содержимое вашего элемента html каждый раз, когда вы его вызываете, что, вероятно, является вашей проблемой.
Вместо этого вы захотите заранее создать свою строку, а затем один раз заполнить элемент. Как насчет создания массива, а затем создания строки с помощью join?
// create your empty array
var lines = [];
// loop x amount of times and add your text to the array
for (var i = 0; i < count; i++) {
lines.push("This is some text");
}
// convert the array to a string, with each string on its own line
document.getElementById("sample-text").innerHTML = lines.join("\n");
есть ли способ сделать это без использования массивов
Почему вы не хотите использовать массивы? Похоже, хороший вариант использования массива.
Однако, если вы настаиваете, вы можете построить строку с помощью var str = "", а затем str += "some text" в своем цикле.
просто интересно, возможно ли это, вы не должны мне показывать, простого да или нет будет достаточно
Просто пытаюсь тебе помочь. Надеюсь, мои предложения указали вам в правильном направлении :)
абсолютно и я не хотел показаться неблагодарным, спасибо за помощь
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>ex10.js</title>
<script>
function myFunction() {
var count = document.getElementById("input-type").value;
if (isNaN(count)) {
document.getElementById("sample-text").innerHTML = "Error. Not a number";
}
else {
// create your empty array
var lines = "";
// loop x amount of times and add your text to the array
for (var i = 0; i < count; i++) {
lines = lines+"Atmiya\n";
}
// convert the array to a string, with each string on its own line
document.getElementById("sample-text").innerHTML = lines;
}
}
</script>
</head>
<body>
<input type = "number" id = "input-type" onKeyUp = "myFunction()">
<p id = "sample-text">Here is some text</p>
</body>
</html>
Есть несколько уловок, чтобы упростить задачу:
<input> elements of type "number" are used to let the user enter a number. They include built-in validation to reject non-numerical entries. The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
Вы также можете использовать оператор += для объединения со свойством innerHTML элемента.
onchange, наверное, лучше использовать, чем onkeyup. Не уверен, что onkeyup работает с тачскрином. В поле ввода числа есть небольшие элементы управления для изменения значения.
function go() {
let text = document.querySelector('#sample-text').innerHTML;
let times = document.querySelector('#times').value;
let output = document.querySelector('#output');
let ix = 0;
output.innerHTML = '';
while (ix < times) {
output.innerHTML += text;
ix++;
}
}<input type = "number" min = "1" id = "times" onchange = "go()">
<p id = "sample-text">Here is some text</p>
<p id = "output"></p>
int i- это не JavaScript (никаких статических типов, никакого отношения к Java); вы имели в видуlet iилиvar i?