Category: JavaScript

To add a select element programmatically with JavaScript, we can use the document.createElement method to create elements.

Then we can use the appendChild method to append child elements into the parent element.

For instance, we can write the following HTML:

<div>

</div>

to add the parent element for the select element.

Then we can add the select element with the option elements in it by writing:

const myParent = document.querySelector('div');
const array = ["Volvo", "Saab", "Mercades", "Audi"];

const selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);

for (const a of array) {
  const option = document.createElement("option");
  option.value = a;
  option.text = a;
  selectList.appendChild(option);
}

We get the div with:

const myParent = document.querySelector('div');

Then we create the select element with:

const selectList = document.createElement("select");

Then we set the id attribute of the select element with:

selectList.id = "mySelect";

Then we append the select element as a child of the div with:

myParent.appendChild(selectList);

Next, we add the option elements into the select element by writing:

for (const a of array) {
  const option = document.createElement("option");
  option.value = a;
  option.text = a;
  selectList.appendChild(option);
}

We loop through the array with the for-of loop.

In the loop body, we call document.createElement with 'option' to create the option element.

We set option.value to set the value attribute of the option element.

And we set the text property to set the option text to display.

Next, we call selectList.appendChild with option to append option to the select element as its child.

To get the entered value from the ACE editor, we can use the getValue method.

And to set the value of the editor, we can use the setValue method.

For instance, we can add the HTML for the editor by writing:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="editor" style="height: 200px; width: 200px">
  some text
</div>

Then we can write the following JavaScript code to get and set the editor value:

const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
const code = editor.getValue();
console.log(code)
editor.setValue("new code here");

We create the editor with:

const editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");

We call ace.edit with the ID of the element to use as the editor element.

Then we call editor.seesion.setMode to set the language mode.

Next, we call editor.getValue to get the value in the editor, which is 'some text‘ .

And the, we call editor.setValue with 'new code here' to replace the existing text with that in the editor.

To iterate through array keys in JavaScript, we can use the JavaScript array keys method to get the keys.

For instance, we can write:

const widthRange = []
widthRange[46] = {
  min: 0,
  max: 52
};
widthRange[66] = {
  min: 52,
  max: 70
};
widthRange[90] = {
  min: 70,
  max: 94
};

for (const i of widthRange.keys()) {
  if (widthRange[i]) {
    console.log(i)
  }
}

to loop through the keys of the widthRange array with the for-of loop.

We call the keys method to remove all the indexes of the array.

And in the loop body, we check if the item widthRange[i] is truthy before logging its value.

Therefore. we get 46, 66, and 90 from the console log.

To replace the last occurrence of a character in a string in JavaScript, we can use the JavaScript string replace method with a regex.

For instance, we can write:

const str = 'a_b_c';
console.log(str.replace(/_([^_]*)$/, '$1'))

to remove the underscore before the 'c' character.

To do that, we call replace with a regex that searches for the last instance of an underscore with a character after it.

Then in the 2nd argument, we pass in '$1' to remove the underscore from the last instance of the regex match.

To change the default text in Dropzone.js, we can set the properties of the Dropzone.prototype.defaultOptions property.

For instance, we can create a drop zone by writing the following HTML:

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<form action="/upload-target" class="dropzone"></form>

We add the dropzone.hs script and CSS. Then we add the form element to add the drop zone.

Next, we set the messages by writing:

Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";

Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";

Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";

Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";

Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";

Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";

Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";

Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";

Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";

Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";

All the messages are in the Dropzone.prototype.defaultOptions property.