如何在HTML中打印JavaScript函数结果
[英]How to print a javascript function result in HTML
问题描述
我有一个函数，我想从javascript中的函数以大写字符串中的其他每个字母来输出html中的字符串。
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.log(result);
}
crazyCaps("helloworld");
window.onload = crazyCaps();
HTML：
<!DOCTYPE html>
<html>
<head>
<script src ="crazycaps.js" type="text/javascript"></script>
</head>
<body>
crazyCaps();
</body>
</html>
7 个解决方案
解决方案1
0 2019-03-01 22:02:03
使用document.body.textContent += result将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>
解决方案2
0 2019-03-01 22:03:30
您在代码中有一些小错误，无法在html标记之间调用javascript函数。 写crazyCaps（）; 只是输出“ crazyCaps（）;” 以明文形式。 您需要返回正在创建的字符串，然后将该结果分配给html中的元素，这可以通过document.getElementById('IDGOESHERE').textContent 。 您的if else语句需要进行结构化，以便花括号结束并开始else语句， if (){} 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.log(result); return result; } document.getElementById('crazyoutput').textContent = crazyCaps("helloworld");
<body> <div id="crazyoutput"> </div> </body>
解决方案3
0 2019-03-01 22:04:58
现代的方法是将一个空的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>
解决方案4
0 2019-03-01 22:09:55
未经测试，但应该可以工作：
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>
解决方案5
0 2019-03-01 22:10:03
// 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.log(crazyCaps("helloworld")); // the console.log 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>
解决方案6
0 2019-03-01 22:19:04
您可以这样实现：
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>
解决方案7
-1 2019-03-01 22:03:31
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);
如何在jQuery .html（）函数中打印javascript数组值？
[英]How to print a javascript array values in a jQuery .html() function?
如何将JavaScript函数（canPlayType）的结果传递给HTML5视频
[英]how to pass the result of an JavaScript function (canPlayType) to an HTML5 video
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何打印JavaScript函数的结果
如何通过JavaScript在HTML中打印结果
如何在HTML文件中打印javascript函数？
如何在html textarea中打印javascript而循环结果？
javascript - 将函数的结果显示为 HTML
显示 JavaScript function 结果为 HTML
如何在jQuery .html（）函数中打印javascript数组值？
如何在HTML中打印JavaScript函数的返回值？
如何获取html打印javascript函数的返回值？
如何将JavaScript函数（canPlayType）的结果传递给HTML5视频
相关标签