CODEWITHSUNDEEP
javascripthtmljsp
ObscurusLux
ObscurusLux

Reputation: 370

javascript not running somehow

I'm trying to make a cart for a shopping site and i use javascript to retrieve data from the servlet and somehow, the javascript isn't being called at all, i tried putting an alert() into the function to check but it's not being called. Can anyone help me? I'd appreciate any help provided, thanks in advance

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="Style.css">
</head>
<body onload="load();">
    <div id="nav">
        <button class="navbtn" onclick="location.href='Home.jsp'">Home</button>
        <button class="navbtn" onclick="location.href='Show'">Products</button>
        <button class="navbtn">About Us</button>
        <button class="navbtn" style="float:right;" onclick="location.href='Login.jsp'">Log in</button>
        <button class="navbtn" style="float:right;" onclick="location.href='Register.jsp'">Register</button>
        <button class="navbtn" onclick="location.href='Cart.jsp'">Cart</button>
        <form style="float:right;" method="Post" action="SearchController">
            <input name="search" id="search" type="text" placeholder="Search..">
            <input type="submit" style="display:none">
        </form>
    </div>
    <table id="tbl" style="border: 1px solid black;width:100%;border-collapse:collapse;">
        <tr>
            <th style="border: 1px solid black;">Name</th>
            <th style="border: 1px solid black;">Price</th>
            <th style="border: 1px solid black;">Quantity</th>
            <th style="border: 1px solid black;">Amount</th>
        </tr>
        <tr id="row">
            <td id="name" style="border: 1px solid black;"><c:out value="${arr.get(0).name}"/></td>
            <td id="price" style="border: 1px solid black;"><c:out value="${arr.get(0).price}"/></td>
            <td id="quantity" style="border: 1px solid black;"><c:out value="${arr.get(0).quantity}"/></td>
            <td id="amount" style="border: 1px solid black;"><c:out value="${Math.ceil(arr.get(0).price*arr.get(0).quantity) }"/></td>
        </tr>
    </table>
    <button style="width:100px;height:30px;background-color:orange;border:none">Submit</button>
    <script type="application/javascript">
    function createRow(int i) {
          var row = document.createElement('tr');
          var col = document.createElement('td');
          var col2 = document.createElement('td');
          var col3 = document.createElement('td');
          var col4 = document.createElement('td');
          row.appendChild(col);
          row.appendChild(col2);
          row.appendChild(col3);
          row.appendChild(col4);
          col.innerHTML = ${arr.get(i).name};
          col2.innerHTML = ${arr.get(i).price};
          col3.innerHTML = ${arr.get(i).quantity};
          col4.innerHTML = ${arr.get(i).price}*${arr.get(i).quantity};
          var table = document.getElementById("tbl");
          table.appendChild(row);
        }
        function load(){    
            alert("Test");
            for(int i=0;i<{arr.size()};i++){
                createRow(i);
            }
        }
        
    </script>
    
</body>
</html>
Edit: Already got answer from comment section

Upvotes: 2

Views: 938

Answers (2)

Aleksey Zikrackiy
Aleksey Zikrackiy

Reputation: 60

I think You should you JS syntax instead Java(or else).

function load(){    
        alert("Test");
        // try to comment this and previous function and you will get your alert.
        // for(let i = 0; i < array.length; i++){
            // createRow(i);
        //}
    }

For Example in JS your loop looks like this:

function load(){    
   alert("Test");
     
   for(let i = 0; i < array.length; i++){
       createRow(i);
   }
}

enter image description here

I hope It'll help you! Be happy and Have a clean code :)

Upvotes: 0

EricHier
EricHier

Reputation: 455

In this case, the JavaScript Code ist defined after the use. In the body tag, you refer to the load() method which is declared afterwards. Moving the load() method up into the head could also help to solve the problem.

Upvotes: 1

Related Questions