Question

我有一个函数，该函数要从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>

Answer 1

使用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>

Answer 2

您在代码中有一些小错误，无法在html标记之间调用javascript函数。写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.log(result);
  return result;
}
document.getElementById('crazyoutput').textContent = crazyCaps("helloworld");

<body>
  <div id="crazyoutput">
  </div>
</body>

https://jsfiddle.net/zeonfrost/4q01x68z/1/

Answer 3

现代的方法是将一个空的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>

Answer 4

未经测试，但应该可以工作：

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>

Answer 5

// 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>

Answer 6

您可以这样实现：

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>

Answer 7

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中打印JavaScript函数结果

7 个答案: