Question

所以我做了一个功能：

function dw (wrtext){
  document.write(wrtext)
}

然后这个：

function creditos(){
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;">------------------------------------------------</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> Preço Certo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> ------------------------------------------------</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 1- 1º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 2- 2º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 3- 3º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 4- Vencedor</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 5- Créditos</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 0- Terminar</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Trabalho: Preço Certo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Realização por: Duarte Nuno de Brito Arribas, Nº 07, 10º M;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Escola Secundária Quinta das Palmeiras;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Curso Profissional Técnico de Multimédia;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Disciplina: Sistemas de Informação (S.I.);</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Módulo 3: Introdução à programação;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Ano letivo: 2016-2017;</p>')
}

只是一堆带有样式的单词，但由于某种原因它不会显示很多单词，除了第二个单词。

任何帮助将不胜感激!!!

欢呼并提前致谢!!!

Answer 1

除非您将所有字符串合并为一个字符串，然后立即将其全部写入，否则这将无效。

如果您查看此处的文档：https://www.w3schools.com/jsref/met_doc_write.asp

document.write将删除所有现有的html，这就是你的代码破解的原因。

这是一个jsfiddle，演示它将所有文本合并为一个，然后使用单个document.write：

https://jsfiddle.net/uch4mxba/

alltext = "";
function dw (wrtext){
  alltext = alltext + wrtext;
}
function creditos(){
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;">------------------------------------------------</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> Preço Certo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> ------------------------------------------------</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 1- 1º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 2- 2º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 3- 3º Jogo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 4- Vencedor</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 5- Créditos</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: left;"> 0- Terminar</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Trabalho: Preço Certo</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Realização por: Duarte Nuno de Brito Arribas, Nº 07, 10º M;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Escola Secundária Quinta das Palmeiras;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Curso Profissional Técnico de Multimédia;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Disciplina: Sistemas de Informação (S.I.);</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Módulo 3: Introdução à programação;</p>')
  dw('<p style="font-family: Arial; font-size: 15pt; font-weight: bold; text-align: right; margin-top: -300px"> Ano letivo: 2016-2017;</p>')
}
creditos();
document.write(alltext);

我会敦促你不要这样做，为什么不将所有这些html写入html文件而不是使用document.write在javascript中构建它？只是一个建议。祝你好运。

Answer 2

有些建议，如果我可以......

请勿使用document.write。它已经过时了，现在是一种不好的做法。
不要重复自己（这些dw来电很糟糕。）
不要将HTML与CSS混合使用。避免使用style属性。
尽可能学习并使用ES6功能。

通过一些重构，您的代码可以更具可读性：

function creditos() {
  document.body.innerHTML = `
    <div class="left">
      ------------------------------------------------<br>
      Preço Certo<br>
      ------------------------------------------------<br>
      <ol>
        <li>1º Jogo</li>
        <li>2º Jogo</li>
        <li>3º Jogo</li>
        <li>Vencedor</li>
        <li>Créditos</li>
        <li>Terminar</li>
      </ol>
    </div>
    <address class="right">
      Trabalho: Preço Certo<br>
      Realização por: Duarte Nuno de Brito Arribas, Nº 07, 10º M;<br>
      Escola Secundária Quinta das Palmeiras;<br>
      Curso Profissional Técnico de Multimédia;<br>
      Disciplina: Sistemas de Informação (S.I.);<br>
      Módulo 3: Introdução à programação;<br>
      Ano letivo: 2016-2017;<br>
    </address>`;
}

document.addEventListener('DOMContentLoaded', () => creditos());

p {
  font-family: Arial;
  font-size: 15pt;
  font-weight: bold;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

Document.write不会显示我想要的内容

2 个答案: