Call an html element and manipulate it in JavaScript

Question

I am new to web development and am trying to implement a grid of file upload zones.

I am using DropZone.js for a site I am building. I have formatted DropZone and created additional DropZones in the html. I have four rows of four, creating a grid. Each of these are calling the same parent in the JavaScript. Inside each of these zones is a default message that says:

"Drop files here to Upload"

I would like to change this. In fact I would like each instance to have a separate description. Each zone in this grid would have a unique description.

What I would like to know is, how exactly would I go around doing this?

I have included the html for the site, the .js and .css for dropzone.js.

Would I be able to call an element from the html in JavaScript and have it manipulate dictDefaultMessage: "Drop files here to upload", from the javascript to create new text that would be relevant to the element being called?

The dropzones are all calling the same parent, I don't want to make sixteen different dropzone.js to make this work.

I am new to web development and an in-depth explanation would be very much appreciated.

Thank you.

Dropzone.prototype.defaultOptions = {
      url: null,
      method: "post",
      withCredentials: false,
      parallelUploads: 2,
      uploadMultiple: false,
      maxFilesize: 256,
      paramName: "file",
      createImageThumbnails: true,
      maxThumbnailFilesize: 10,
      thumbnailWidth: 120,
      thumbnailHeight: 120,
      filesizeBase: 1000,
      maxFiles: null,
      params: {},
      clickable: true,
      ignoreHiddenFiles: true,
      acceptedFiles: null,
      acceptedMimeTypes: null,
      autoProcessQueue: true,
      autoQueue: true,
      addRemoveLinks: false,
      previewsContainer: null,
      hiddenInputContainer: "body",
      capture: null,
      renameFilename: null,
      dictDefaultMessage: "Drop files here to upload",
      dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
      dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
      dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
      dictInvalidFileType: "You can't upload files of this type.",
      dictResponseError: "Server responded with {{statusCode}} code.",
      dictCancelUpload: "Cancel upload",
      dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
      dictRemoveFile: "Remove file",
      dictRemoveFileConfirmation: null,
      dictMaxFilesExceeded: "You can not upload any more files.",
      accept: function(file, done) {
        return done();
      },

<title>Zone #16</title>

    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
    <p style="color:rgb(4,0,84)" align="center"> Drop your file in the appropriate zone. There are 16 zones to choose from </p>
    <!-- Change /upload-target to your upload address -->
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>


    <title>Zone #</title>

    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
    <!-- Change /upload-target to your upload address -->
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>

[Documentation](http://www.dropzonejs.com/#tips) says "If you do not want the default message at all... you can put an element inside your dropzone element with the class `dz-message` and dropzone will not create the message for you." That might be helpful for specifying a custom message per zone. — showdev, Jul 27 '16 at 20:17

score 0 · Answer 1 · edited May 23 '17 at 12:22

First of all, you only need to include the script and stylesheet once in the header. Just make sure if you put your script in the header, it's with async.

HTML

<head>
<!-- Stylesheet goes here -->
<!-- Script goes here -->
</head>

Now for each of your forms, you need to give them a unique ID.This will let your JavaScript know which ID should get which box.

HTML

<form action="" class="dropzone" id="zone16"></form>

Finally, to give each zone a unique name, you only need to change the dictDefaultMessage.

You do this like so:

JavaScript

Dropzone.options.zone16 {
    dictDefaultMessage: "This is the sixteenth zone!"
}

score 0 · Answer 2 · answered Jul 27 '16 at 21:08

defaultValues more looks like a backup of the configuration to set the default values back.

you can manipulate html(DOM) objects in javascript

first you have to get your object.

//Via Id
var obj = document.getElementById("EnterIdHere");
//Via Class
var obj = document.getElementByClassName("EnterClassNameHere"); //unsure for correct spelling

Next you can access the DOM-Object and manipulate it.

var obj = document.getElementById("divExample");

obj.style.backgroundColor = "green"; //Do a CSS action

obj.classList.toggle("Crap", false); //Disable CSS-Class Crap

obj.innerHTML = "New Content"; //Labeling it

Basic tutorial: http://callmenick.com/post/basics-javascript-dom-manipulation

Call an html element and manipulate it in JavaScript

2 Answers2