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

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之前的标记中。
提示：尝试在<script> tag使用type="text/javascript" ，因为当您使用w3c验证程序验证代码时，由于以下原因，您的代码将无法验证:)

Answer 3

替换为：

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

用

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