如何将 return 分配给 pre 元素？

Question

我想弄清楚如何将生成的 CSS 分配给 pre 元素。我希望最终结果是 pre 元素内的简单 CSS 代码。类似于我在 console.log 中分享的内容。谁能帮忙解释一下我做错了什么？

 function generate(columnStartName, columnEndName) {
          columnStartName = document.getElementById("start").value;
          columnEndName = document.getElementById("end").value;
        
          let columnStartStyles = ''
          let columnEndStyles = ''
          
          for(let i = 1; i <= 12; i++) {
              columnStartStyles+=`div[class~="${columnStartName}${i}"] {grid-column-start: ${i};}
      `
              columnEndStyles+=`div[class~="${columnEndName}${i}"] {grid-column-end: ${i+1};}
      `
          }
            let pre = document.querySelector('#msg pre');
            pre.textContent = generate;


          // console.log
          // `/* Grid system */
          // grid, .grid {
          //   display: grid;
          //   grid-template-columns: var(--grid-tc-12);
          //   grid-column-gap: var(--grid-gap);
          //   grid-row-gap: var(--grid-gap);
          //   align-content: stretch;
          //   align-self: stretch;
          // }
          
          // grid > div {
          //   align-self: start;
          // }
          // ${columnStartStyles}
          // ${columnEndStyles}
          // `
}

<form>
  <input id="start" type=text value="start"> 

  <br><br>
  <input id="end" type=text value="end">

  <br><br>
  <INPUT TYPE=button VALUE="Generate CSS"  onClick="generate();">

 </form>

<div id="msg">
 <pre></pre>
</div>

Answer 1

您需要执行以下操作：

去掉模板末尾的space。使用 \n 换行对于 textContent 行，请改用 columnEndStyles 和 columnStartStyles。

function generate(columnStartName, columnEndName) {
          columnStartName = document.getElementById("start").value;
          columnEndName = document.getElementById("end").value;
        
          let columnStartStyles = ''
          let columnEndStyles = ''
          
          for(let i = 1; i <= 12; i++) {
              columnStartStyles+=`div[class~="${columnStartName}${i}"] {\n  grid-column-start: ${i};\r\n}\n\n`
              columnEndStyles+=`div[class~="${columnEndName}${i}"] {\n  grid-column-end: ${i+1};\r\n}\n\n`
          }
            let pre = document.querySelector('#msg pre');
            pre.textContent = columnStartStyles + columnEndStyles;


          // console.log
          // `/* Grid system */
          // grid, .grid {
          //   display: grid;
          //   grid-template-columns: var(--grid-tc-12);
          //   grid-column-gap: var(--grid-gap);
          //   grid-row-gap: var(--grid-gap);
          //   align-content: stretch;
          //   align-self: stretch;
          // }
          
          // grid > div {
          //   align-self: start;
          // }
          // ${columnStartStyles}
          // ${columnEndStyles}
          // `
}

<form>
  <input id="start" type=text value="start"> 

  <br><br>
  <input id="end" type=text value="end">

  <br><br>
  <INPUT TYPE=button VALUE="Generate CSS"  onClick="generate();">

 </form>

<div id="msg">
 <pre></pre>
</div>

如何将 return 分配给 pre 元素？

How to assign a return to a pre element?

javascript

pre