iMd iMd - 1 month ago 8
HTML Question

How can I display certain text from a javascript inside the html?

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

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