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

Question

I'm just starting to learn javascript, so I don't know how everything works. I have this function:

<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>

When I click the "link1" the result appears in a blank page, how can I display the info inside the same page?

Answer 1

I suggest you create a div where you want to display the results, for example:

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

Then use

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

in your JavaScript to display the results in the div.

Answer 2

As far what I understood is that "You're trying to display information on a same page using javascript"? If you're trying something similar to this then continue reading...
How Is This Possible?
This is possible if you create a <div> tag on same page and assign an id to it & then use javascript DOM to show text in it. Let's start doing it. Step 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>

What .innerHTML does? If you are familiar with other languages such as java or etc there is function of append() which concatenates new element with previous one. Similarly .innerHTML can be used to append new element or text into tag preceding with DOM.
Tip: try to use type="text/javascript" in <script> tag because when you validate your code with w3c validator your code won't be validated because of this :)

Answer 3

Replace this :

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

With

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