CODEWITHSUNDEEP
javascriptphpcssfunctionformatting
user11987846
user11987846

Reputation:

Why breaking line (\n) doesn't work in my code?

I'm creating table of TV providers and contacts to them.

The general functionality you can see there: https://i.sstatic.net/9m7n7.jpg

Table is constructed in way, that in each row is button with provider. After clicking this button next row is opened under clicked one, showing contact information.

ContactRow contains 2 cells. In the first one i put emails, in the second phone numbers. However it is not presented nicely, contacts looks like like the've been spit out instead of correctly formatted.

The general idea is that I would like to use \n or any other alternative to <br/> in order that I could format contactRow in form of "table" that will looks like this:

[email protected] | 0-000-000-000 [email protected] | [email protected] | 0-000-000-000

Program works in this way:

  1. Using php I create table and import contacts from contacts.txt
  2. Clicking button with provider calls a JavaScript function specialFunc() passing provider that was inside of button.
  3. specialFunc() calls addRow() function inside of it, both of them will be explained in pseudocode below.

File contacts.txt is created in this way:

PROVIDER1;[email protected] [email protected];0-000-000-000 0-000-00-00 PROVIDER2;[email protected];0-000-000-000 0-000-00-00; PROVIDER3;[email protected] [email protected];0-000-000-000

So that number of emails and number of phone numbers may vary from 0 to 6. JavaScript function chooses contacts by reading first word before ;

The reason why you can see emails formatted quite nicely in the video is because in .css file I made EmailCell and PhoneCell to be wrapping text, so in the case of emails, first one fits, second one not, that's why it's moved to other line. However this is not good approach, because if there are short emails there are in the same line.

I tried to separate each phone number in contacts.txt by ; for testing and remade line: provInfoPhone = contactsFromTxt[2]; to

provInfoPhone = contactsFromTxt[2] + "\n" + concatsFroxTxt[3];

however it didn't help in any way. It's neither printed in html as "\n" nor breaking line and moving it to next one.

addRow(ProperIndexOfRow{wheretoinsert}){
    *code reffering to correct table, to correct position where to insert newRow*
    *code deleting previously added row(when someone is zapping over buttons)*
    let newCell = newRow.insertCell(0);
    let newText = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText);
    let newCell2 = newRow.insertCell(1);
    let newText2 = document.createTextNode(provInfoEmail);
    newCell.appendChild(newText2);
}


specialFunc(prov) {
    switch(prov):
        case "EXAMPLE1":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        case "EXAMPLE2":
            provInfoEmail = contactsFromTxt[1];
            provInfoPhone = contactsFromTxt[2];
            break;
        [...]
    addRow(properIndex);
}

Could you help me? I know that my problem needs quite a lot of reading and understanding, but I believe I lack some of basic approaches to such problems.

Upvotes: 0

Views: 99

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

As I think you know, all whitespace including tabs and newlines in HTML is rendered as a single normal space. To get line breaks without the CSS properties you were using, you'll need to separate them into distinct text nodes with a br element in-between. Roughly:

let newCell2 = newRow.insertCell(1);
let first = true;
for (const entry of provInfoEmail.split("\n")) {
    if (first) {
        first = false;
    } else {
        newCell.appendChild(document.createElement("br"));
    }
}

That post-processes your string with \n in it. Obviously if you can do this earlier (when you were figuring out where the \n should be), that would be better.

Upvotes: 1

Related Questions