[FIXED] Java Struts 1 can't add JavaScript and CSS

Issue

Building a modal in Struts 1, but having a problem trying to apply Js and css to my company's application. Web pages are built in struts 1 and all of the web content are in form of JSP files. On top of every JSP file there is JS then HTML4 and some struts custom tags in html.

I tried using class="", classType, styleClass, id, but I can't seem to pick elements in JS and css. I can't style anything and I also can't see anything related to it online. I'm trying to toggle modal on and off with javascript but onClick is not calling JS for some reason. I also tried JS in the global script and that is not working also probably because it runs too early and never runs again. I put JS in a function and called that with onclick but that doesn't work also.

Here are the tags that I am working on.

image of JS as a onClick triggered by onclick function

HTML

Picture of the modal I am trying to implement

rendered modal

HTML

<div styleClass="mainAdvanceModal">
    <button id="advanceModalBtn" styleClass="advanceButton">Click Here</button>
    <div id="simpleModal" styleClass="modal">
        <div classType="modal-content">
            <span styleClass="modalCloseBtn">&times;</span>
            <p>Hello... I am modal</p>
        </div>
    </div>
</div>


        <html:button property="method" style="cursor:default;" onclick="advanceModal()"><bean:message key="Advance"/></html:button>

JS

// Get modal element
var modal = document.getElementById('simpleModal');
// Get open modal button
var modalBtn = document.getElementById('advanceModalBtn');
// Get close button
var closeBtn = document.getElementsByClassName('modalCloseBtn')[0];

function advanceModal() {
    // Get modal element
    var modal = document.getElementById('simpleModal');
    // Get open modal button
    var modalBtn = document.getElementById('advanceModalBtn');
    // Get close button
    var closeBtn = document.getElementsByClassName('modalCloseBtn')[0];

    // Listen for click
    modalBtn.addEventListener('click', openModal);
    //Listen for close click
    closeBtn.addEventListener('click', closeModal);
    //list for outside click
    window.addEventListener('click', outsideClick);
}


//Function to open modal
function openModal() {
    modal.style.display = 'block';
}

//function to close modal
function closeModal() {
    modal.style.display = 'none';
}

//function to close modal on outside click
function outsideClick(e) {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
}

`

Solution

There was a css.jsp page where I had to add a link to the new css page.

Answered By - bugs account
Answer Checked By - Mildred Charles (JavaFixing Admin)