Rufen Sie ein HTML-Element und manipulieren Sie es in JavaScript

Question

Ich bin neu in der Web-Entwicklung und versuche, ein Raster von Datei-Upload-Zonen zu implementieren.

Ich benutze DropZone.js für eine Website, die ich baue. Ich habe DropZone formatiert und zusätzliche DropZones im HTML erstellt. Ich habe vier Viererreihen, die ein Raster bilden. Jedes dieser Elemente ruft dasselbe Parent im JavaScript auf. Innerhalb jeder dieser Zonen ist eine Standardmeldung, die besagt:

„Drop hier Dateien hochladen“

würde ich dies ändern möchten. Tatsächlich möchte ich, dass jede Instanz eine eigene Beschreibung hat. Jede Zone in diesem Raster hätte eine eindeutige Beschreibung.

Was ich gerne wissen würde ist, wie genau würde ich das tun?

Ich habe die HTML für die Website, die. Js und. Css für dropzone.js enthalten.

Wäre ich in der Lage, ein Element aus dem HTML in JavaScript aufzurufen und es manipulieren dictDefaultMessage: "Drop files here to upload", aus dem Javascript, um neuen Text zu erstellen, der für das aufgerufene Element relevant wäre?

Die Dropzones rufen alle dasselbe Elternteil auf, ich möchte sechzehn verschiedene dropzone.js nicht machen, um das zu erreichen.

Ich bin neu in Web-Entwicklung und eine eingehende Erklärung würde sehr geschätzt werden.

Vielen Dank.

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>

Answer 1

Zunächst einmal müssen Sie nur das Skript und Sheet einmal im Header enthalten. Stellen Sie nur sicher, wenn Sie Ihr Skript in die Kopfzeile setzen, es ist with async.

HTML

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

nun für jedes Ihrer Formulare, müssen Sie sie über eine einzigartige ID.This geben wird sie JavaScript wissen lassen, welche ID erhalten sollen, welche Box.

HTML

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

, schließlich einen eindeutigen Namen jeder Zone zu geben, müssen Sie nur die dictDefaultMessage ändern.

Sie tun dies, wie so:

JavaScript

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

Answer 2

Defaultvalues ​​mehr sieht aus wie eine Sicherung der Konfiguration wieder die Standardwerte einzustellen.

können Sie HTML (DOM) Objekte in Javascript

zuerst müssen Sie bekommen Ihr Objekt manipulieren.

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

nächstes können Sie die DOM-Objekt zugreifen und es bearbeiten.

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

Grund Tutorial: http://callmenick.com/post/basics-javascript-dom-manipulation