Question

我刚开始学习javascript，所以我不知道一切是如何运作的。我有这个功能：

<div id="box1">
  <a id="link1">Link</a>
  <div><script>
   function script() {

var producto,cantidad,precio,tp,imagen;

producto=prompt("Ingresar producto:");
cantidad=parseInt(prompt("Ingresar cantidad:"));

switch (producto) {
  case "disco":
    precio=200;imagen="disco.jpg";break;
  case "micro":
    precio=800;imagen="micro.jpg";break;
  case "placa":
    precio=500;imagen="placa.jpg";break;
  case "memoria":
    precio=800;imagen="memoria.jpg";break;
  case "case":
    precio=100;imagen="case.jpg";break;
  case "tarjeta":
    precio=300;imagen="tarjeta.jpg";break;
  default:
    alert("No se encuentra el producto en lista");
}
tp=precio*cantidad;

document.write( "Producto: "+producto+"<br>");
document.write("Precio: "+precio+"<br>");
document.write("Cantidad: "+cantidad+"<br>");
document.write("<br>");
document.write("Total a pagar: "+tp+"<br>");
document.write("<img src="+imagen+">");
};
document.getElementById('link1').onclick = function () {
script();
};
</script></div>

当我点击“link1”时，结果显示在空白页面中，如何在同一页面内显示信息？

Answer 1

我建议您创建一个想要显示结果的div，例如：

<div id = "blablabla"></div><br>

然后使用

document.getElementById('blablabla').innerHTML="Producto: "+producto+"<br>";

在您的JavaScript中

以在div中显示结果。

Answer 2

据我所知，“您正试图使用javascript在同一页面上显示信息”？如果你正在尝试与此类似的东西，那么继续阅读...
这怎么可能？
如果您在同一页面上创建<div>标记并为其指定了ID，则可以使用此选项。然后使用javascript DOM在其中显示文本。让我们开始吧。第1步： -

<div id="TextGoesHere"></div>
<a id="link1">Link</a>
<script>
   function script() {

var producto,cantidad,precio,tp,imagen;

producto=prompt("Ingresar producto:");
cantidad=parseInt(prompt("Ingresar cantidad:"));

switch (producto) {
  case "disco":
    precio=200;imagen="disco.jpg";break;
  case "micro":
    precio=800;imagen="micro.jpg";break;
  case "placa":
    precio=500;imagen="placa.jpg";break;
  case "memoria":
    precio=800;imagen="memoria.jpg";break;
  case "case":
    precio=100;imagen="case.jpg";break;
  case "tarjeta":
    precio=300;imagen="tarjeta.jpg";break;
  default:
    alert("No se encuentra el producto en lista");
}
tp=precio*cantidad;
var div = document.getElementById("TextGoesHere");
div.innerHTML = div.innerHTML + "Producto: "+producto+"<br>";
div.innerHTML = div.innerHTML + Precio: "+precio+"<br>";
// Similarly you just have to copy above line paste again and replace variables. 
};
document.getElementById('link1').onclick = function () {
script();
};
</script>

什么.innerHTML呢？ 如果您熟悉其他语言（如java等），则可以使用append（）函数将新元素与前一个元素连接起来。同样 .innerHTML可用于将新元素或文本追加到DOM之前的标记中。
提示：尝试在type="text/javascript"中使用<script> tag，因为当您使用w3c验证程序验证代码时，您的代码将不会被验证，因为：）

Answer 3

替换它：

document.write( "Producto: "+producto+"<br>");

用

document.getElementById('link1').innerHTML="Producto: "+producto+"<br>";

如何在html中的javascript中显示某些文本？

3 个答案: