Running Document.Write(Help Needed Immediately)

Running Document.Write(Help Needed Immediately)
0

#1

Hello all, I need help with the following code:

document.write("<table id='resultTable' border='1'><tr><th>Name:</th>"+"<td> <input type="text" name="FullName2" id="fname2" readonly></td></tr>"+"
<th>Member ID:</th><td> <input type="text" name="MemberID2" id="mid2"></td> <tr> <th>Size:</th>
<td> <input type="text" name="Size" id="size" value="" readonly> </td> </tr> <tr> <th>Color: </th> <td>
<input type="text" name="ColorR" id="cr" readonly> </td> </tr> <th>Delivery Option: </th> <td>
<input type="text" name="Deliver" id="dh2" readonly> </td></table>
    }

The code above needs to be broken evenly so that it will actually run in Javascript. The problem is after adding + after

Member:ID… the line becomes black instead of grey. No IDE is being used for this example, only Notepad++.

#2

First, document.write() is bad practice. Create a node, and simpy append that to the document.

Second, you could concatenate a string, or use a string literal to allow multi-line. Just off the cuff ideas.


#3

Just use backticks, not ", then just write the HTML string across different lines like:

document.write(`
</th>
  <td>
    <input type="text" name="FullName2" id="fname2" readonly>
  </td>
</tr>
`);

#4

Hello,

While I understand that often times document.write() is considered not good(?), it is unfortunately what is being used as the appropriate method.


#5

I get that, there are times I find I need to use it as well. Largely my point is to be aware of the gotchas. Take a look at the response with sixty votes on that page to get a pretty good overview of why it can have unexpected effects.


#6

Hello I will try this. The issue with notepad+++ is that it will not read regular broken lines like done in other IDES and will not render the page correctly.

document.write('<table id= 'resultTable' border= '1'<tr><th>Name:</th>'+<td><input type="text" name="Fullname2" id="fname2" readonly></td></tr>'+'<th>Member ID:</th><td><input type="text" name="MemberID2" id="mid2"></td><tr>+'<th> Size</th>+<td><input type="text" name="Size" id="size" value="" readonly></td></tr><tr>+'<th>Color:</th><td><input type="text" name="ColorR" id="cr" readonly></td></tr>'+'<th>Delivery Option:</th><td><input type="text" name="Deliver" id="dh2" readonly></td></table>'}

#7

Looks like you have a } instead of a ) at the end of that line. Plus you should start and end with a backtick and not a single quote.

FYI - I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#8

Hello,

Thanks for explaining what a backtick is, which is specific for posting code on Freenode.

document.write("<table id='resultTable' border='1'><tr><th>Name:</th>"+"<td><input type="text" name="FullName2" id="fname2" readonly></td></tr>"+"<th>Member ID:</th><td> <input type="text" name="MemberID2" id="mid2"></td><tr>"+
"<th>Size:</th><td><input type="text" name="Size" id="size" value="" readonly></td></tr>"+ 
"<tr><th>Color:</th><td> <input type="text" name="ColorR" id="cr" readonly></td></tr>"+
"<th>Delivery Option:</th><td><input type="text" name="Deliver" id="dh2" readonly> </td></table>"

I’m use to seeing javascript code as either " " or ’ quotes. Am still having an issue in notepad++ not correctly rendering the page even with the code as-is above works directly in html (without +). I have placed + between each corresponding

that is associated with 1 data but I need to run it through the Javascript so that it doesn’t initially show on the page until after click-event.

Are there any example from the above to successfully break lines in notepad so that pages render correctly? Attempting to break it above just shows the second table on the page(when its not suppose to) and doesn’t collect the input from a corresponding table now because of the notepad++ reading issue.


#9

Your latest code a couple of issues. First you are missing the closing parentheses ) at the end. The other is you seem not to understand when you can and can not intermix double quotes with single quotes. If you main string starts and ends with single quotes, then each concatenation will use single quotes. Then inside the single quoted string you can use double quotes without any problem. The same would be the case of your main string starts and ends with double quotes.

Below is an example of the main string being single quotes.

document.write('The next word is surrounded by double quotes: "word".  It does not need to be surrounded like "word, because it is within a single quote string.');

If you want to use single or double quotes throughout, then you would have to escape them like:

document.write("The next word is surrounded by double quotes: \"word\".  It does not need to be surrounded like \"word, because it is within a single quote string.');

You may need to review the following FCC challenges:

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings/

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings/

If you take the advice of @DanCouper and surround your entire string with single backticks, then you can put whatever you want (double quotes or single quotes matched/unmatched). Plus, your code would be more readable and easier to make changes to it.


#10

Hello,

Thanks for response. I have visited the links but their mostly on \n \t concepts.

Here is an example working code below using double quotes:

    document.write("<table id='resultTable' border='1'><tr><th>Full Name:</th>"+
    "<td><input type='text' name='FullName2' id='fname2' value='"+fullname+"' readonly></td>"+
    "</tr><th>Member ID:</th><td><input type='text' name='MemberID2' id='mid2' value='"+mid+"'>"+
    "</td><tr><th>Gender:</th><td><input type='text' name='Male2' id='m2'value='"+g+"' readonly>"+
    "<input type='hidden' name='Male2' id='f2' value='1' readonly></td></tr><tr><th>"+
    "Height:</th><td><input type='text' name='Height2' id='h2' value='"+height+"' readonly></td></tr><th>"+
    "Weight:</th><td><input type='text' name='Weight2' id='w2' value='"+weight+"' readonly></td><tr>"+
    "<th>Ideal Weight:</th><td><input type='text' name='IdealWeight' id='iw' value='"+calculateResult(weight)+"' readonly></td></tr></table>'");

It is ideal to start the entire .write with ’ ’ quotes for flexibility and better editing along with familiarity, but doing so immediatly changes the greyed out text in notepad++ to black letters in the first line, which will not run. The second is the issuue with the + signs that are associated with each table row. Because of notepad++, the placement of the + are not as well compared to other rendering applications.

document.write('<table id='resultTable' border='1'><tr><th>Full Name:</th>'+

Is there an example or solution available to fix these two problems without having the entire code sitting on one single line?


#11

Yes. Use template literal as suggested by @DanCouper. The other suggestion is use a different editor or see if there are some extensions you can download to use with Notepad++.

If you editor is the limiting factor preventing you from writing readable code, ditch the editor.


#12

By the way, your html syntax is not correct. You have many missing <tr> and </tr> throughout the code you have in the document.write statement.


#13

Tell me if you think the following is more readable or not?

document.write(`
  <table id='resultTable' border='1'>
    <tr>
      <th>Full Name:</th>
      <td><input type='text' name='FullName2' id='fname2' value='${fullname}' readonly></td>
    </tr>
    <tr>    
      <th>Member ID:</th>
      <td><input type='text' name='MemberID2' id='mid2' value='${mid}'></td>
    </tr>
    <tr>
      <th>Gender:</th>
      <td>
        <input type='text' name='Male2' id='m2' value='${g}' readonly>
        <input type='hidden' name='Male2' id='f2' value='1' readonly>
      </td>
    </tr>
    <tr>
      <th>Height:</th>
      <td><input type='text' name='Height2' id='h2' value='${height}' readonly></td>
    </tr>
    <tr>
      <th>Weight:</th>
      <td><input type='text' name='Weight2' id='w2' value='${weight}' readonly></td>
    </tr>
    <tr>
      <th>Ideal Weight:</th>
      <td><input type='text' name='IdealWeight' id='iw' value='${calculateResult(weight)}' readonly></td>
    </tr>
  </table>
`);

#14

The example above is more readable than the previous. Although +'s can be used, it might be better to leave those for functions that involve arithmetic and strings rather than trying to concatenate the HTML, _though this would be usefu_l it’ll avoid the issues with the code-breaking lines with notepad++.

I see the ` sign being used inside the parameters. I’ll try to code above.