Calculate Javascript pixel widths for list of elements

by

It seems like you mix up html and javascript syntax. Html are those <tag> things.

First of all, I recommend you this course or some other, just to get started with JavaScript.

To create an element in JS, you can either use document.write, which is probably much easier but may be used only before the document loads. You can use it like this:

width = 42; //or whatever
document.write('<div style="width: '+width+'px">adsf</div>');

Or the more difficult, but also more flexible way – to use the DOM. You would do it this way:

var div = document.createElement('div'); //create new element
div.style.width = 42; //set its width to whatever you want
div.textContent = "some text"; //add some text into the div
someElement.appendChild(div); //insert the element into another one

The someElement here is either an element you get by calling document.getElementById (or a similar function) or, if you want them directly inside the body, just write document.body.

.

With respect to @Marc_B’s answer, the final code would look something like this:

var list = [1,2,3,4];
var div;
for (var n = 0; n < array.length; n++) {
  div = document.createElement('div');
  div.style.width = 25*n;
  document.body.appendChild(div);
}

More Related Contents:

  1. I want to make first option in dropdown to display as a placeholder
  2. best tools for theme design? [closed]
  3. Alternative to string.split
  4. How to send FormData objects with Ajax-requests in jQuery? [duplicate]
  5. AJAX cross domain call
  6. How to detect a textbox’s content has changed
  7. Make VueJS and jQuery play nice
  8. How to pass parameters on onChange of html select
  9. Adding/removing items from a JavaScript object with jQuery
  10. How to create a JQuery Clock / Timer
  11. jQuery jqGrid Show message when an edit row is complete
  12. Open a new javascript window(.open) along with its CSS styling
  13. How to ajax-submit a form textarea input from CKEditor?
  14. window.print() is not printing the whole page
  15. Converting an image to base64 in angular 2
  16. Trigger standard HTML validation (form) without using submit button? [duplicate]
  17. Why is element not being shown before alert?
  18. Implementing jquery UI autocomplete to show suggestions when you type “@”
  19. Remove ‘All Files’ option from HTML file input
  20. How to delay execution in between the following in my javascript
  21. Use PHP code in external Javascript file
  22. Converting string array to Name/Value object in javascript
  23. Rotate div text after clicking on button using jquery and css
  24. How to select all textareas and textboxes using jQuery?
  25. let user scrolling stop jquery animation of scrolltop?
  26. Hot to get incomplete datetime-local input values
  27. Prevent a link to reload page
  28. Do duplicate ID values screw up jQuery selectors?
  29. How to determine if the client is a touch device [duplicate]
  30. Can you have multiple lines in an element?

Leave a Comment