Executing JavaScript code does not execute CSS code

Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript.

<script>
      var createTable = function(){
      var street = document.getElementById("search-street").value;
      var suburb = document.getElementById("search-suburb").value;
      var pc = document.getElementById("search-pc").value;
      var type = document.getElementById("search-type").value;
      var counter=0;
      if (street == '' && suburb == '' && pc == '' && type == '') {
        for(i=0;i<myArray.length;i++){
          var id = myArray[i][4];
          if(counter%3==0){
            document.write("<div class='row'>");
          }
          document.write("<div class='col-sm-6 col-md-4'>");
          document.write("<div class='thumbnail'>");
          document.write("<div class='caption'>");
          document.write("<p>" + myArray[i][3] + "</p>");
          document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
          document.write("</div>");
          document.write("</div>");
          document.write("</div>");
          counter++;
          if(counter%3==0){
           document.write("</div>");
          }
        }
      } else {
        for(i=0;i<myArray.length;i++){
          var id = myArray[i][4];
          if(counter%3==0){
            document.write("<div class='row'>");
          }
          if(street==myArray[i][0] || suburb==myArray[i][1] || pc==myArray[i][2] || type==myArray[i][3]){
            document.write("<div class='col-sm-6 col-md-4'>");
            document.write("<div class='thumbnail'>");
            document.write("<div class='caption'>");
            document.write("<p>" + myArray[i][3] + "</p>");
            document.write("<p><a href='edit_property.php?id="+id+"' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id="+id+"' class='btn btn-danger' role='button'>Delete</a></p>");
            document.write("</div>");
            document.write("</div>");
            document.write("</div>");
            counter++;
          }
          if(counter%3==0){
           document.write("</div>");
          }
        }
      }
    }
    createTable();
    </script>
javascripthtmlcss

Answer №1

Avoid using document.write; instead, utilize a variable to modify or add content within an element.

Check out this code snippet: https://jsfiddle.net/cq14qot3/

var myArray = [["1", "2", "3", "4", "5"],["6", "7", "8", "9", "10"]];
    var createTable = function() {
        var street = document.getElementById("search-street").value;
        var suburb = document.getElementById("search-suburb").value;
        var pc = document.getElementById("search-pc").value;
        var type = document.getElementById("search-type").value;
        var counter = 0;
        var outputHTML = '';
        if (street == '' && suburb == '' && pc == '' && type == '') {
            for (i = 0; i < myArray.length; i++) {
                var id = myArray[i][4];
                if (counter % 3 == 0) {
                    outputHTML += ("<div class='row'>");
                }
                outputHTML += ("<div class='col-sm-6 col-md-4'>");
                outputHTML += ("<div class='thumbnail'>");
                outputHTML += ("<div class='caption'>");
                outputHTML += ("<p>" + myArray[i][3] + "</p>");
                outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
                outputHTML += ("</div>");
                outputHTML += ("</div>");
                outputHTML += ("</div>");
                counter++;
                if (counter % 3 == 0) {
                    outputHTML += ("</div>");
                }
            }
        } else {
            for (i = 0; i < myArray.length; i++) {
                var id = myArray[i][4];
                if (counter % 3 == 0) {
                    outputHTML += ("<div class='row'>");
                }
                if (street == myArray[i][0] || suburb == myArray[i][1] || pc == myArray[i][2] || type == myArray[i][3]) {
                    outputHTML += ("<div class='col-sm-6 col-md-4'>");
                    outputHTML += ("<div class='thumbnail'>");
                    outputHTML += ("<div class='caption'>");
                    outputHTML += ("<p>" + myArray[i][3] + "</p>");
                    outputHTML += ("<p><a href='edit_property.php?id=" + id + "' class='btn btn-default' role='button'>Edit</a> <a href='#delete_property.php?id=" + id + "' class='btn btn-danger' role='button'>Delete</a></p>");
                    outputHTML += ("</div>");
                    outputHTML += ("</div>");
                    outputHTML += ("</div>");
                    counter++;
                }
                if (counter % 3 == 0) {
                    outputHTML += ("</div>");
                }
            }
        }
        document.body.innerHTML = outputHTML;
        alert(outputHTML);
    }
    createTable();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using vanilla JavaScript in a node.js environment alongside Functional Reactive Programming (FRP) with bacon.js

I am interested in incorporating Functional Reactive Programming (FRP) into my project. I have come across a popular library for node.js called bacon.js that implements FRP. However, I am having trouble finding examples of how to use bacon.js in native J ...

javascriptnode.jsfrpbacon.js

How can I navigate to an anchor using hover?

I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...

htmlcss

Managing numerous inquiries from a single customer within a succession of brief intervals

After creating a web application with a dashboard to showcase different reports and graphs based on user selections, I encountered an issue. Users can interact with the reports using checkboxes and radio buttons. Every time a checkbox or radio button is s ...

javajavascriptajaxjakarta-eerequest

Creating React components through the use of the map function

Utilizing the hackernews api, I am attempting to extract the "data" property from my response object in order to display each story title individually on the browser. Initially, the data is structured as an array of id's representing individual storie ...

javascriptreactjs

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

JavaScript syntax issue detected, semicolon missing

I've encountered an issue with a form that contains potential errors defined in PHP. To dynamically change the form action based on the presence of errors, I have incorporated JavaScript into the process. The PHP error variable, $errors, has been conv ...

javascriptphpjson

What is the best way to pass JavaScript object literals from a Node.js server to the frontend browser?

In Node, I am working with JavaScript object literals containing methods in the backend. For example: const report = { id: 1, title: 'Quarterly Report for Department 12345', abstract: 'This report shows the results of the sales ...

javascriptnode.jsjsonaxiosobject-literal

Troubleshooting problem with MongoDB queries within a for loop

I have an array of user emails obtained from the post data. My goal is to find the _id associated with each email. Here's the for loop I attempted: var studentIds = []; for (var i = studentEmails.length - 1; i >= 0; i--) { var email = studentEm ...

javascriptmongodbexpress

Arrange a group of users in the middle

Looking for some help with this specific code snippet .selection_user { display: block; background-color: #2D2C31; text-align: center; line-height: 75px; } <div class="select_user_menu"> <div class="selection_user">User1</div> ...

htmlcss

How can I make a DIV occupy the entire vertical space of the page?

I am working on a Google Maps application that takes up the majority of the screen. However, I need to reserve a strip at the top for a menu bar. How can I ensure that the map div fills the remaining vertical space without being pushed past the bottom of ...

csshtml

Display: Show view once forEach loop finishes execution

I'm facing an issue with my update query execution within a loop. Is there a way to trigger the rendering of a view once the forEach loop completes all its iterations? Here's the snippet of code: conn.query(`SELECT Id, ${sfColumn} from Lead`, ...

javascriptnode.jsexpress

Dynamic Display Picture Banner - Adjustable Layout

My home page features a full screen image header that I'm working to make responsive. The width of the image is being cut off on various screen sizes. I've attempted adjusting the height and width settings, but I want the image itself to resize ...

csswordpressresponsive

problem encountered when transferring data using ajax

I'm struggling with figuring out how to use an ajax function My goal is to send PHP variables via ajax to another page when a user clicks on a link Javascript function sendData(a, b, c, d) { $.ajax({ url: "page.php", typ ...

javascriptphpjqueryajax

Ways to display varied JSON information on a component in Angular 4

I am facing a challenge with a reusable component that fetches data from a JSON file. I want to customize the data displayed when this component is used as a subcomponent within other components. For example, let's say we have a Banana component: @U ...

javascriptjsonangular

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

Guide to loading a minified file in Angular 2 with Gulp Uglify for TypeScript Bundled File minimization

In my Angular 2 application, I have set the TypeScript compiler options to generate a single outFile named Scripts1.js along with Scripts1.js.map. Within my index.html file: <script src="Scripts/Script1.js"></script> <script> ...

javascripttypescriptangulargulpgulp-uglify

Planning and organization of a Node.js/Express project

Having a background in MVC programming with frameworks like Laravel, CodeIgniter, and Django, I have now transitioned to working on larger projects in Node.js. However, I am struggling to find a suitable way to structure my project effectively... After so ...

javascriptnode.jsexpress

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

I encountered an issue when trying to render the following code: SyntaxError: Unexpected token 'export' (project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js Everything seems to work as expected initially, but then ...

javascriptnode.jsreactjsnext.js

Is there a way to retrieve the ID from a span and convert it into a string format?

let wordSpan = '<span class="we w_o_r_d_s" id="we" contenteditable="false">we</span>' console.log(wordSpan.id); console.log(wordSpan.attr('id')); console.log(wordSpan.getAttribute('id')); let newDiv = document.c ...

javascriptjqueryhtml

Utilizing X-editable in an ASP MVC View: navigating the form POST action to the controller

I have been utilizing the X-Editable Plugin to collect user input and perform server submissions. However, I am encountering an error during submission. What adjustments should I make in order to ensure that the x-editable data functions properly with the ...

javascriptajaxasp.net-mvcx-editable