Text concluding on the identical line

I'm encountering issues with my program today. I am developing a simple electron.js application to send payment talons to members from an Excel file.

The problem arises when trying to print out the member's name from a loop.

If I use:

'<p> ' + 'my name' + ' </p>' + 

it works perfectly fine, but as soon as I substitute a variable in its place, everything gets jumbled up.

 '<p> ' + first_name_val + ' </p>' +

https://i.sstatic.net/Z4TIp.png

Here is the entire JavaScript code:


var xlsx = require('xlsx');
var workbook = xlsx.readFile('./app/members.xlsx');

var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
var members = [];
var count = 0;
var payed_count = 0;

for(var i = 12; i < 500; i++)
{
    var id = 'A' + i;
    var first_name = 'B' + i;
    var last_name = 'C' + i;
    var kommentar = 'H' + i;
    var betalt = 'J' + i;

    var d_id = worksheet[id];
    var d_first_name = worksheet[first_name];
    var d_last_name = worksheet[last_name];
    var d_kommentar = worksheet[kommentar];
    var d_betalt = worksheet[betalt];

    if(betalt_val == ' '){
        $("#pageswithpgtalon").append(
           '<div class="page">' +
          '<div class="from">' +
            '<h2>title</h2>' +
            '<p>Intresseförening</p>' +
          '</div>' +
          '<div class="to">' +
              '<p> ' + first_name_val + ' </p>' +
              '<p>address</p>' +
          '</div>' +
          '<div class="textbox">' +
          '</div>' +
          '<div class="toplusgiro">' + 
            '49 87 85 - 5' +
         ' </div>' + 
          '<div class="paymentrecipient">' +
            'Joakim Wennergren' + 
          '</div>' +
       '</div>'
        )
    } 

    var id_val = (d_id ? d_id.v : ' ');
    var first_name_val = (d_first_name ? d_first_name.v : ' ');
    var last_name_val = (d_last_name ? d_last_name.v : ' ');
    var kommentar_val = (d_kommentar ? d_kommentar.v : ' ')
    var betalt_val = (d_betalt ? d_betalt.v : ' ')

    if(betalt_val != ' '){
        payed_count++;
    }

    count++;

    if(!d_first_name)
        break;
}

$("#nusers").html(count);
$("#npages_with_pg").html(payed_count);
$("#npages_without_pg").html(count - payed_count);

Below is my CSS code:


html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-print-color-adjust: exact;
  font-size: 14px;
}

@media print {
   body {
    margin: 0px 0px 0px 0px !important;
    }
}

@import "~bootstrap/dist/css/bootstrap.css";

/* Additional CSS rules here */

Answer â„–1

Your choice to set the position of the .from and .to classes as fixed is effective. This ensures that they will remain in a consistent location on your screen. The functionality may seem seamless when a variable is not utilized, as all instances of .from and .to will have matching text, thus preventing any noticeable overlap.

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

How does a JS event impact the state transition in a backend state machine built on Rails?

I am currently developing a new project where the backend involves Users who have multiple "Courses" each containing multiple "Steps". My goal is to create a JavaScript function that validates the user's answer. For example, if the user inputs "6", w ...

Developed using Express JS, a convenient numpad feature specifically designed for Electron applications

Seeking a number pad that resembles . I am inexperienced in this field and struggling to integrate it into an electron application developed with Express and Pug. Any assistance would be greatly appreciated. ...

Organizing your web application directories with AngularJS and Node.js

As I dive into the world of learning node.js and angularjs, I find myself struggling with how to best organize and structure my folders and their contents. Despite coming across some existing questions on this topic, none have provided a solution that trul ...

Tips for detecting when multiple image sources have finished loading in an *ngFor loop

I have an array of image URLs that are displayed in a repetitive manner using the *ngFor directive in my HTML code. The technology stack used for this project includes Ionic 4 and Angular 10. <div *ngFor="let url of imagesToLoad; let i = index&quo ...

What is the best method for choosing the parent elements?

I am attempting to create a sidebar that saves the last clicked link in local storage and still displays the collapsed links after the page is reloaded. $(".clickedLink").parent().parent().css('background-color', 'green'); Ca ...

Unraveling a binary file to an mp3 format with the power of Node.js

When attempting to encode an MP3 file to Base64 in Node.js using the following method: encodebase64 = function(mp3file){ var bitmap = fs.readFileSync(mp3file); var encodedstring = new Buffer(bitmap).toString('base64'); fs.writeFileS ...

unable to load()

I am currently in the process of converting frames to div elements. My approach involves using jQuery's load() method, but I have encountered an error that has me stumped. The code snippet below is where the issue resides. Any assistance would be grea ...

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

When I click on the image icon, it should be clickable and a popup dialogue box will open to upload a new image. Check out this sample image for reference. Any help on this would be greatly appreciated. Thanks in advance. <div class="d-flex align-ite ...

Learning SQL and PHP is essential for displaying data from a database in a dynamic table on a web page. In order to select specific columns from the database and arrange them in

I am working with a sql table called res that contains various rows and columns. Here is an example of the data: Sno RegNo Name sub1 sub2 sub3 total percent result color 1 1DU12CS100 s1 10 10 10 30 50 fail danger 2 ...

Tips for making sure an image appears in the Reader Viewer

I have created a setup using HTML/CSS to showcase images of screenshots for my product: <p>Take a look at these screenshots:</p> <div> <a href="images/pic1.png" target="_blank" title="Screenshot 1"> <img border="0" src="images/p ...

Displaying error messages on a form that uses ng-repeat in Angular

I am trying to dynamically generate input fields using ng repeat in Angular, but I am encountering an issue where error messages only appear on the last element. How can I make these error messages apply to each individual element? <form name="setPla ...

Showing the JSON server response on the client side without using JQuery

I'm working on creating a function that can retrieve JSON server responses and then display the content from the JSON in a list on a webpage without relying on JQuery. Is there a way to accomplish this task? filterGet: function () { var ajax ...

How can you conceal all elements except for one div from screen readers?

I recently set up a popup on my website that pops up when a button is clicked. This popup covers most of the screen and prevents users from interacting with anything else on the webpage until they close the popup. While this setup works well for sighted us ...

Is it necessary to compile Jade templates only once?

I'm new to exploring jade in conjunction with express.js and I'm on a quest to fully understand jade. Here's my query: Express mentions caching jade in production - but how exactly does this process unfold? Given that the output is continge ...

Utilize fancybox to target and display related content through external links within tabs

My website features a stylish box with tabbed inline content, allowing users to navigate between different views by clicking on tab names. However, I want the tabbed content to be accessible when a user clicks on a navigation link to launch the box. For ex ...

Display dynamic form with database value on click event

Seeking assistance to create a JavaScript function or any other method to address the issue I am facing. Currently, I have a functional pop-up form and a table connected to a database with queries. The pop-up form successfully appears upon clicking, howeve ...

Tips on utilizing ajax to load context without needing to refresh the entire page

As a beginner in AJAX, I have some understanding of it. However, I am facing an issue on how to refresh the page when a new order (order_id, order_date, and order_time) is placed. I came across some code on YouTube that I tried implementing, but I'm n ...

Styling input groups with box shadows in Bootstrap 4

One issue I am encountering is the focus shadow that appears when the input text is focused. My goal is to have both the text input and the right button display a focus border. To illustrate this problem, I have created a JSfiddle: http://jsfiddle.net/a5u ...

View the full desktop version of the website on your mobile device

Which viewport dimensions should be added to the viewport meta tag in order to view a desktop version of a mobile site while browsing? ...

Which framework should be used: client-side or server-side?

I am working on a project similar to craiglist, where users can post announcements for everyday items like cars and flats. I have already developed a significant portion of the backend using a RESTful API in three-tier architecture with Java, connecting to ...