Running Document.Write(Help Needed Immediately)

JavaScript
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>'}
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.

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?

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.