Waarom krijg ik m'n return waarde niet?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
let imgName;
document.querySelector('input').onchange = (e) => {
const [file] = e.target.files;
imgName = "/Users/janhkila/Desktop/" + file.name;
console.log("image name: ", imgName); [line 11]
return imgName;
}
console.log("image name: ", imgName); [line 14]
/*
[Log] image name: undefined (main.js, line 14)
[Log] image name: "/Users/janhkila/Desktop/go-turk-01.png" (main.js, line 11)
*/
document.querySelector('input').onchange = (e) => {
const [file] = e.target.files;
imgName = "/Users/janhkila/Desktop/" + file.name;
console.log("image name: ", imgName); [line 11]
return imgName;
}
console.log("image name: ", imgName); [line 14]
/*
[Log] image name: undefined (main.js, line 14)
[Log] image name: "/Users/janhkila/Desktop/go-turk-01.png" (main.js, line 11)
*/
Wat zie ik hier over het hoofd?
Dat geeft uiteindelijk een naam van een plaatje terug. Waarheen is mij niet duidelijk.
Op regel 8 (of 14) zet jij een variabele naar console.log.
Die is gedefineerd, maar heeft geen waarde. Die had je op regel 1 een waarde moeten geven.
Wel kan deze waarde overschreven worden binnen jouw functie die op regel 2 begint. Maar return heeft daar geen toepassing.
Dus: imgName krijgt een waarde zodra input van waarde verandert (onchange).
Tot die tijd is deze var leeg.
--
ik gebruik normaal
var imgName;
ipv "let". Weet niet wat het verschil is.
https://www.programiz.com/javascript/let-vs-var
Nog meer :
https://www.google.com/search?q=javascript+let+vs+var+difference
Er is nog iets waar ik vreemd van opkijk:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
const img = new Image();
// img.src = '/Users/janhkila/Desktop/cat-davey.JPG';
img.src = '/../../../cat-davey.JPG'; // <= Dit werkt!
// img.src = './cat-davey.JPG'; // <= Dit werkt, dat was bekend
// img.src = '/Users/janhkila/JavaScript/image-on-canvas/cat-davey.JPG';
// img.src = '/../../../../cat-davey.JPG'; // <= En dit werkt ook!
img.onload = () => {
...
// img.src = '/Users/janhkila/Desktop/cat-davey.JPG';
img.src = '/../../../cat-davey.JPG'; // <= Dit werkt!
// img.src = './cat-davey.JPG'; // <= Dit werkt, dat was bekend
// img.src = '/Users/janhkila/JavaScript/image-on-canvas/cat-davey.JPG';
// img.src = '/../../../../cat-davey.JPG'; // <= En dit werkt ook!
img.onload = () => {
...
Kan iemand uitleggen waarom een absoluut path niet werkt, maar een ingewikkeld relatief path wel?
Dank voor de reactie.
Inmiddels heb ik gevonden wat ik zocht.
Dat was best lastig omdat ik niet wist waar ik naar moest zoeken.
Maar, als je het zoek argument eenmaal kent; dan is het weer makkelijk.
URL.createObjectURL()
Voor mensen die hetzelfde zoeken:
https://docs.w3cub.com/dom/file/using_files_from_web_applications