如何在HTML中打印JavaScript函数结果
[英]How to print a javascript function result in HTML
问题描述
I have a function where I want to print a string in html from a function in javascript that capitalizes every other letter in the string. 
我有一个函数，我想从javascript中的函数以大写字符串中的其他每个字母来输出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.log(result);
}
crazyCaps("helloworld");
window.onload = crazyCaps();
HTML: 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
Use document.body.textContent += result to write the result to the page. 使用document.body.textContent += result将document.body.textContent += result写入页面。 And you don't need to have a window.onload statement, you just need to the function: 而且您不需要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
You have som small mistakes in your code you cant call javascript functions in between your html tags. 您在代码中有一些小错误，无法在html标记之间调用javascript函数。 writing crazyCaps(); 写crazyCaps（）; just outputs "crazyCaps();" 只是输出“ crazyCaps（）;” in plaintext. 以明文形式。 You need to return the string that you are creating and then assign that result to an element in your html, that can be done with document.getElementById('IDGOESHERE').textContent . 您需要返回正在创建的字符串，然后将该结果分配给html中的元素，这可以通过document.getElementById('IDGOESHERE').textContent 。 Your if else sentence you need to structure it so the curlybracers ends and your else statement begins, if (){} else{} you had your else statement placed inside your if statement. 您的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>
https://jsfiddle.net/zeonfrost/4q01x68z/1/ https://jsfiddle.net/zeonfrost/4q01x68z/1/
解决方案3
0 2019-03-01 22:04:58
The modern approach is to set up an empty HTML element as a placeholder for the results to go in and then you populate that when needed. 现代的方法是将一个空的HTML元素设置为占位符，以将结果放入其中，然后在需要时填充它。 Also, you really don't need the window.onload event handler, just move the <script> to just before the body element closes. 另外，您确实不需要window.onload事件处理程序，只需将<script>移动到body元素关闭之前。 By that point, all the HTML has been parsed into the DOM and is ready to be interacted with. 到那时，所有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
Not tested, but should work: 未经测试，但应该可以工作：
JS: 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 的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
You could achieve it like this: 您可以这样实现：
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.