Print with Button

JavaScript
1

Hi, i try to make it so that, when I press the button to print all the information, but I don’t know why it prints them on one line. Also how can it not print my phone number if it is not spelled correctly

Script:

<script>

  var sel= document.getElementById("select_size");
  var ele = document.getElementsByName('colour');
 
  function displaySelectValue() {
      for(i = 0; i < sel.length; i++) {
          if(sel[i].selected)
              document.getElementById("result").innerHTML = "Size: " + sel[i].value;
      }
  }

  function displayRadioValue() {
  
      for(i = 0; i < ele.length; i++) {
          if(ele[i].checked)
              document.getElementById("result2").innerHTML = "Colour: "+ele[i].value;
      }

  }

  function displayCheckBoxValue(){

      var checkboxes = document.getElementsByName('ex');
      var result3 = ""
      for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].checked) {
               result3 += checkboxes[i].value + " ";
          }
      }
      document.body.append("Additional services have value: " + result3 );  
  }

  function displayAddressPhone(){
      var address= document.getElementById("addrinput").value;
      var phone= document.getElementById("phoneinput").value;

      document.body.append("The order address is: " + address);  
      document.body.append("Phone number: " + phone);  
  }

  function totBill(e){
      var extras=document.querySelector("#extras");
      var total=document.querySelector("#total1");
      var currentSum=parseInt(total.value);
      if (e.target.type == "checkbox"){
          console.log("checkbox clicked!");
      if (e.target.checked )
          currentSum+= parseInt(e.target.value);
      else
          currentSum-= parseInt(e.target.value);
      }
      total.value=currentSum;

  }
  extras.addEventListener("click", totBill);


  var btn=document.getElementById("selected"); 
  btn.addEventListener("click", function(){

      displaySelectValue() 
      displayRadioValue()
      displayCheckBoxValue()
      displayAddressPhone()   
      totBill()
    
  })
      
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>

</style>

    <h3>T-shirt: 25 $</h3> 
    <form action=""> 

    <fieldset id="size" class="hide">
    <legend style="font-size: larger;"><strong>Please, select a size</strong></legend>
    <label>Sizes</label> 
        <select name="razmer"  id="select_size">
            <option></option>
        	<option>XS</option>
        	<option>S</option>
        	<option>M</option>
        	<option>L</option>
            <option>XL</option>
        </select>
    </fieldset>

    <fieldset id="orderinfo" class="hide">
        <legend style="font-size: larger;"><strong>Please, choose a colour</strong></legend>
        <div id="tColour">T-shirt Colours
            <label><input type="radio" name="colour" value="black"/>Black</label>
            <label><input type="radio" name="colour" value="white"/>White </label>
            <label><input type="radio" name="colour" value="blue"/>Blue</label>
            <label><input type="radio" name="colour" value="red"/>Red</label>
         </div>
        </fieldset>

    <fieldset id="yslygi" class="hide">  
        <legend style="font-size: larger;"><strong>Add an additional service if you like!</strong></legend>
        <div id="extras">Additional service
            <label><input type="checkbox" id="op"  name="ex" value="5"/>Gift wrap</label>
            <label><input type="checkbox" id="dsh" name="ex" value="12"/>Add stamp</label>
            <label><input type="checkbox" id="da"  name="ex" value="10"/>Address delivery</label>
            <label><input type="checkbox" id="do"  name="ex" value="7"/>Office delivery</label>
        </div>
    </fieldset> 



    <fieldset id="contactinfo">
        <legend style="font-size: larger;"><strong>Contact</strong></legend>

            <label for="addrinput">Address</label>
            <input type="text" id="addrinput" name="Address_tf" /><br>

            <label for="phoneinput">Phone</label>  
            <input type="tel" id="phoneinput" name="Phone_tf" pattern="[0-9]{10}" required/><br>   

 </fieldset>    

</form>
<input type="submit" id="selected" value="Изведи информация за поръчката"/>
<input type="text" name="total1" id="total1" value="25" readonly="readonly" /> 
<div id="result"></div>
<div id="result2"></div> 
     
</body>
</html>
2

Read the docs for .append(). The text is added as text nodes and appended to the end of the document.

Add the data into an HTML element already in the DOM, like you are doing with result and result2.

Or create the elements, add the data to them, and then add the elements to the DOM. If you want the data on separate lines it should be added to block-level elements (like a p or div element for example).

The easiest way is to use template literals and insertAdjacentHTML or innerHTML.

function displayAddressPhone() {
  var address = document.getElementById("addrinput").value;
  var phone = document.getElementById("phoneinput").value;
  
  const html = `
   <p>The order address is: ${address}</p>
   <p>Phone number: ${phone}</p>
  `
  document.getElementById("result2").insertAdjacentHTML('beforeend', html)
}

However, that is not really safe with user input unless you use something like DOMPurify.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.