如何在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>";