Validator warning in my javascript

colak · Yesterday 05:28:30

I have a javascript that reads:

<script>
document.write('<div id="overview" style="width: 100%;height:400px;"></div>');
var dom = document.getElementById('overview');
...

and I’m getting a warning in most javascript validators that “document.write can be a form of eval” for line 1, ie. on
document.write('<div id="overview" style="width: 100%;height:400px;"></div>');

I know I can move the particular line in its own <script> enclosure, or even just have it as html. The problem with the second option is that the div renders when js is disabled.

Would any js wizard out there know if there is a way I can fix this?

jakob · Yesterday 08:08:54

It’s only a warning (document.write can be potentially exploitable as it can be used to write anything to the page), so you could leave it, but the alternative is to use javascript’s own methods for creating DOM objects and giving them attributes. They only add specific DOM objects:

var overviewDiv = document.createElement('div');
overviewDiv.id = 'overview';
overviewDiv.style.width = '100%';
overviewDiv.style.height = '400px';
document.body.appendChild(overviewDiv); // This line adds it to the end of body

var dom = document.getElementById('overview');

(you may need to adjust the commented line depending on where you need the div to appear.)

colak · Yesterday 15:26:27

jakob wrote #340270:

It’s only a warning (document.write can be potentially exploitable as it can be used to write anything to the page), so you could leave it, but the alternative is to use javascript’s own methods for creating DOM objects and giving them attributes. They only add specific DOM objects:

var overviewDiv = document.createElement('div');...

(you may need to adjust the commented line depending on where you need the div to appear.)

Thanks so much Julian,

I’m investigating how I can create 5-6 divs with different ids on different parts of the page. I’m starting with developer.mozilla.org/en-US/docs/Web/API/Document/createElement to hopefully understand the basics.

jakob · Yesterday 20:05:07

Are these each very individual things, or is there a pattern to them? If they are essentially similar, then perhaps make the above code into a function that you call with the respective parameters when you need them. Ideally, you’ll want some kind of marker or wrapper that you can use to position the items.

createElement() only makes the object, but it only becomes part of your page when you insert it, either inside a container (e.g. appendChild) or before or after another element.

If your items are all (virtually) identical, and maybe only need a unique id, e.g. like several instances of a gallery or a video, you can create normal (non-js) HTML wrappers to hold the galleries, give them each a common class, and then use the javascript once at the end of the page to loop over them and insert the relevant code in each one.

colak · Today 02:37:40

jakob wrote #340274:

Are these each very individual things, or is there a pattern to them? If they are essentially similar, then perhaps make the above code into a function that you call with the respective parameters when you need them. Ideally, you’ll want some kind of marker or wrapper that you can use to position the items.

createElement() only makes the object, but it only becomes part of your page when you insert it, either inside a container (e.g. appendChild) or before or after another element.

I had to count:) Seven are essentially the same with width: 100%;height:400px; but they have to have different ids. One is 100% wide with text in it. Each one has its particular place in an article.

If your items are all (virtually) identical, and maybe only need a unique id, e.g. like several instances of a gallery or a video, you can create normal (non-js) HTML wrappers to hold the galleries, give them each a common class, and then use the javascript once at the end of the page to loop over them and insert the relevant code in each one.

I tested this before I came here I had this:

<div id="my_id1"></div>

but I had an issue as without the inline style, ie, width: 100%;height:400px; the js doesn’t work. With the inline styling, there are 400px gaps in the webpage when js is disabled. This is why I thought of using document.write('<div id="overview" style="width: 100%;height:400px;"></div>');.

jakob · Today 07:17:00

Three ideas:

1. You could make your placeholder insertion points like this:

<div id="my_id1" class="my-item"></div>

and in your javascript first loop over all items with class .my-item and assign them the height /width you need, before your other javascript acts on them.

// Select all elements with the class "my-item"
const items = document.querySelectorAll('.my-item');

// Loop through each item and set the width and height
items.forEach(item => {
  item.style.width = '100%';
  item.style.height = '400px';
});

// … rest of your javascript function …

2. If your placeholder divs are entirely empty in the source (i.e. have nothing between start and end tag) before javascript acts on them, you could use css to not display them. If each has a class (like in 1), you can opt not to show them if they are empty:

.my-item:empty { display: none; }

See the docs for :empty. This would work in situations where javascript is switched off or doesn’t act (e.g. malfunctions).

3. Have a no-js tag on your <html> tag that gets overwritten when javascript is active, as described by Paul Irish

Give each of your placeholder divs a class (like in 1) and then add:

.no-js .my-item { display: none; }

to your css. This works if javascript is deactivated wholesale but wouldn’t catch malfunctioning javascript.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 05:28:30