Как распечатать результат функции javascript в HTML
У меня есть функция, в которой я хочу напечатать строку в html из функции в javascript, которая использует каждую вторую букву в строке.
JavaScript:
function crazyCaps(s){
let result = ""
for (let i = 0; i < s.length; i++)
if (i%2 == 0){
result += s[i].toLowerCase();
else {
result += s[i].toUpperCase();
}
}
console.info(result);
}
crazyCaps("helloworld");
window.onload = crazyCaps();
HTML:
<!DOCTYPE html>
<html>
<head>
<script src = "crazycaps.js" type = "text/javascript"></script>
</head>
<body>
crazyCaps();
</body>
</html>
Я думаю, что в вашем коде отсутствуют фигурные скобки. Во-вторых, вы назначаете возвращаемое значение из своей функции в качестве обработчика onload окна. Тем не менее, ваша функция ничего не возвращает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Используйте document.body.textContent += result, чтобы записать результат на страницу. И вам не нужно иметь оператор window.onload, вам просто нужна функция:
function crazyCaps(s) {
let result = ""
for (let i = 0; i < s.length; i++) {
if (i%2 == 0) {
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
document.body.textContent += result;
}
crazyCaps("helloworld");
<body></body>document.write() следует использовать только тогда, когда это необходимо, то есть когда новый документ создается динамически на лету. При неправильном использовании он может перезаписать текущий документ и привести к его удалению. При правильном использовании вы должны строить выходные данные линейным образом, что обычно невозможно. Вместо этого используйте DOM API для заполнения/изменения уже существующих элементов DOM или создания новых по мере необходимости.
Извините, @ScottMarcus, исправлю с помощью innerHTML
Не используйте .innerHTML, когда нет HTML для чтения или записи. Это влияет на производительность и безопасность. Используйте .textContent для строк, отличных от HTML.
Ладно, еще раз извините @ScottMarcus
Не хотелось бы вас ломать, но прямо сейчас ваш код создает функцию на веб-странице. И, как у вас есть, результаты всегда будут добавляться внизу страницы. Что, если результаты нужно отправить куда-то еще?
У вас есть небольшие ошибки в вашем коде, вы не можете вызывать функции javascript между вашими тегами html. написание CrazyCaps(); просто выводит "crazyCaps();" в открытом тексте.
Вам нужно вернуть строку, которую вы создаете, а затем назначить этот результат элементу в вашем html, что можно сделать с помощью document.getElementById('IDGOESHERE').textContent.
Ваше предложение if else вам нужно структурировать так, чтобы фигурные скобки заканчивались, а оператор else начинался, if (){} else{} вы разместили оператор else внутри оператора if.
function crazyCaps(s) {
let result = ""
for (let i = 0; i < s.length; i++)
if (i % 2 == 0) {
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
console.info(result);
return result;
}
document.getElementById('crazyoutput').textContent = crazyCaps("helloworld");<body>
<div id = "crazyoutput">
</div>
</body>https://jsfiddle.net/zeonfrost/4q01x68z/1/
Не используйте .innerHTML, когда нет HTML для чтения или записи. Это влияет на производительность и безопасность. Используйте .textContent для строк, отличных от HTML.
@ScottMarcus, вы совершенно правы, здесь нет причин использовать innerHTML, я отредактировал свой ответ, чтобы отразить ваше улучшение.
function weird_string_format(string){
let temp = "";
for(let i = 0; i < string.length; i++){
temp += (i % 2 === 0) ? string[i] : string.charAt(i).toUpperCase()
}
return temp;
}
document.write(temp);
Это не делает то, о чем спрашивает вопрос.
Современный подход состоит в том, чтобы настроить пустой HTML-элемент в качестве заполнителя для результатов, а затем заполнить его при необходимости. Кроме того, вам действительно не нужен обработчик событий window.onload, просто переместите <script> непосредственно перед закрытием элемента body. К этому моменту весь HTML-код был проанализирован в DOM и готов к взаимодействию.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- JavaScript will access this element and populate it.-->
<div id = "results"></div>
<!-- Placing the script just before the closing body tag ensures
that by the time the parser reaches this point, all the HTML
will have been read into memory. -->
<script src = "crazycaps.js" type = "text/javascript"></script>
<script>
// Get a reference to the element where the output will go
let output = document.getElementById("results");
function crazyCaps(s){
let result = "";
for (let i = 0; i < s.length; i++){
if (i%2 == 0){
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
output.textContent = result; // Populate the element
}
crazyCaps("helloworld");
</script>
</body>
</html>Не тестировалось, но должно работать:
JS:
function crazyCaps(s){
let result = ""
for (let i = 0; i < s.length; i++) {
if (i%2 == 0){
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
document.getElementById("text").innerText=result;
}
window.onload = crazyCaps('helloworld');
HTML
<!DOCTYPE html>
<html>
<head>
<script src = "crazycaps.js" type = "text/javascript"></script>
</head>
<body>
<div id = "text"></div>
</body>
</html>
.innerText нестандартный. Используйте .textContent.
// INSIDE crazycaps.js
function crazyCaps(s){
let result = "";
for (let i = 0; i < s.length; i++){
if (i%2 == 0){
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
return result;
// the string is returned as a result
}
console.info(crazyCaps("helloworld"));
// the console.info now occurs OUTSIDE of the crazyCaps function
window.onload = () =>
document.body.textContent = crazyCaps( "example crazy capitals");
// window.onload is assigned to a CALL BACK FUNCTION, which is executed onload<!DOCTYPE html>
<html>
<head>
<script src = "crazycaps.js" type = "text/javascript"></script>
</head>
<body>
</body>
</html>Это заменит весь текст в body результатами функции.
@ScottMarcus В чем проблема? How to print a javascript function result in HTML. document.body — это произвольный элемент, используемый, в качестве простого примера, для print a result in HTML.
Проблема в том, что ваш код выбросит все остальное в теле. Вы не думаете, что это проблема? Именно из-за этого ваш ответ не таков, как бы кто-то на самом деле это сделал.
@ScottMarcus Опять же, это простой пример. Вопрос имеет пустое тело. Я могу буквально сказать то же самое о вашем ответе: The problem is that your code would throw away everything else in the results container. Автор мог легко заменить document.body другим элементом за 2 секунды.
Нет нельзя?! Мой ответ помещает вывод в конкретный элемент, предназначенный для его получения. Поскольку ваш ответ показывает способ, который не является практичным ни в одном сценарии, и не описывает реальный способ решения проблемы, это не очень хорошее решение.
РЖУ НЕ МОГУ. В моем ответе нет ничего скопированного у вас или кого-либо еще, кроме исходного кода OP. Мой ответ был опубликован ДО вашего! ржу не могу
Вы действительно думаете, что взять текст из функции с именем CrazyCaps и поместить его в div внутри основного тела более правильно, чем это решение для реальный сценарий.
Кроме того, вы манипулируете DOM внутри функции, используемой для генерации строк CrazyCap. Базовое разделение задач. Вы пишете такой код в реальных сценариях?
Да, конечно. Stack Overflow — это база знаний. Очевидно, что ОП и многие другие, кто найдет эту страницу, не понимают, как это работает. Показывать им «своего рода» ответ и просто предполагать, что они поймут, что им действительно нужно сделать это по-другому, — не очень хорошее предположение. Послушай, ты можешь злиться и спорить, или ты можешь принять мои комментарии за то, что они есть, за простую конструктивную критику и, надеюсь, чему-то научиться из них.
У вас есть проблема с манипулированием DOM внутри функции? Где ты управляет DOM?
Я думаю, что этот ответ лучше вашего; значит, вы педантично пытаетесь найти в нем недостатки.
Извините, что не ответил: "Извините, @ScottMarcus, исправлю с помощью document.getElementById("results")"
Вы можете добиться этого следующим образом:
function crazyCaps(s) {
let result = ""
for (let i = 0; i < s.length; i++) {
if (i % 2 == 0) {
result += s[i].toLowerCase();
} else {
result += s[i].toUpperCase();
}
}
//Make sure to return your result instead of just logging it
return result;
}
document.addEventListener('DOMContentLoaded', function() {
this.body.textContent = crazyCaps('helloworld')
});<html>
<head>
</head>
<body>
</body>
</html>Это заменит весь текст в body результатами функции.
@ScottMarcus Привет, Скотт. Я посмотрю на это, когда вернусь домой. Я думал, что это была желаемая функциональность OP.