this is my js code
const imgSrcs = [
'C:\Users\obito\OneDrive\Desktop\To-Students\4.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\5.jpg',
'C:\Users\obito\OneDrive\Desktop\To-Students\6.jpg'
];
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
and this is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript: DOM</title>
<link rel="stylesheet" href="css5.css">
<script defer src="ex5.js"></script>
</head>
<body>
<figure id="header">
<img src="#" alt="#">
</figure>
</body>
</html>
i am trying to make this page everytime you reload it a random picture from the array pops up
this only worked for me if i try to link an image through a website url or somthing
but when i try to get images from my pc and use the folderpath to reach the image this never works
and i keep getting this msg in the console
tar5.html:1 Not allowed to load local resource: file:///C:/UsersobitoOneDriveDesktopTo-Students%06.jpg
any idea why this is happening?
Use relative path. If your html is in folder To-Students and your images in To-Students/images then use const imgSrcs = ['images/4.jpg', 'images/5.jpg', 'image/6.jpg']
remove the defer on your script and have
window.addEventListener("load",function() {
const img = document.querySelector('img');
img.src =imgSrcs[Math.floor(Math.random() * imgSrcs.length)];
})
I think It's because the javascript cannot access to C (because it needs that administrator accept the javascript)
Related
I'm trying to get the name of the uploaded image file in my HTML. I tried to apply the solutions at https://stackoverflow.com/questions/1804745/get-the-filename-of-a-fileupload-in-a-document-through-javascript and https://stackoverflow.com/questions/14359913/how-to-get-value-of-img-tag. They helped me a bit but not fully.
So, my img tag looks just like this:
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
and the above function looks like this:
function imgListener(imgFile){
console.log(document.getElementById('imgPreview').src)
}
When I run this code it shows me a crazy long text with thousands of letters and digits. That's for sure not what I asked for.
The console output looks something like this, but only a lot longer:
data:image/jpeg;base64,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
I'm using src and not value. I'm guessing that's what's causing this. but i dont know how else I could access this information,I now know that value is not used for img tag. How can I do it, so that I get just the name of the file?
this works, just tested on a local file and give the correct name. just have to familiarize yourself with the object properties on the img object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
<script>
function imgListener(imgFile){
console.log(document.getElementById('imgPreview').attributes[1].textContent);
}
</script>
</html>
let me know if that works
alternative
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" width="500px" height="360px" style="padding-left:15px;" onload="imgListener()"/>
<script>
function imgListener(imgFile){
let name = document.getElementById('imgPreview').attributes[1].textContent;
let nameSplit = name.split("/");
let lastSplit = nameSplit[nameSplit.length - 1];
console.log(lastSplit);
}
</script>
</html>
Try something like this:
function imgListener(imgFile){
const el = document.getElementById('imgPreview');
const tmp = document.createElement("div");
tmp.appendChild(el);
console.log(tmp.getElementsByTagName("img")[0].getAttribute("src").split("/").reverse()[0])
}
<img id="imgPreview" src="Anzeige%20erstellen-Dateien/default_offers_photo-edd8e5ff2d549a9fa1a898b23119931ebd0e745.png" style="padding-left:15px;" onload="imgListener()"/>
Create a temporary item and append the image to get the attribute, I don't know if this works in your case.
document.getElemntById('whatever the ID is').files[0].name
I am trying to instantiate a class in one JavaScript file in another HTML file but I keep on getting this error.
Here is the code for the JavaScript file:
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
And here is the code for the HTML. It should be noted that I am also using chessboard.js and chess.js and that everything is saved in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="css/chessboard.css" />
</head>
<body>
<script src="js/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="js/json3.min.js"></script>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/chessboard.js"></script>
<script src="class.js"></script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
What is causing this error and how can I fix it?
This could be a result from improper file locations, like #sideroxylon said, js/class.js instead of class.js.
"The HTML <base> tag is used to specify a base URI, or URL, for relative links." https://www.tutorialspoint.com/html/html_base_tag.htm This could be another reason your file is inaccessible.
It could also be from certain URL's being blocked. Try opening Developer Console (CTRL-SHIFT-I or F12) and looking for any errors on your page.
If you're loading over HTTPS any content from an HTTP source may be blocked. Here is your exact code (using online versions of each library) but with the class.js file loaded in as a regular script tag and including the starting <body> tag.
https://jsfiddle.net/ckazwozg/ As you should see, it is working quite well.
Edit: For convenience, here is the raw source code from the JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" href="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js"></script>
<div id="board" style="width: 400px"></div>
<p>PGN: <span id="pgn"></span></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/oakmac/chessboardjs/master/src/chessboard.js"></script>
<script>
// class.js
class Puzzle {
constructor(fenStart, pgnEnd) {
this.fenStart = fenStart;
this.pgnEnd = pgnEnd;
}
}
</script>
<script>
var pgnEl = $('#pgn');
const x = new Puzzle("test", "test");
pgnEl.html(x.fenStart);
</script>
</body>
</html>
I had the same error however what I did was ensure all my files are been saved to the root folder in your case I think that's js(since all your extension points to that location) in my case I've used only the file name after giving it javascript extension (.js) e.g...
I've been using the code below to change an image src if the path is invalid. I'd like to do the same thing with iFrame srcs but can't get it to work. Any help appreciated.
<!DOCTYPE html>
<html>
<body>
<p>This example assigns an "onerror" event to an img element with an
incorrect src path, then changes the path to a default one that works.</p>
<img name="image" onerror="changeUrl()" src="http://www.xyziiijj.jpg">
<script>
function changeUrl() {
var site = "http://www.cw-testing.co.uk/SportsTickets-
testing/images/marker.png";
document.getElementsByName('image')[0].src = site;
}
</script>
</body>
</html>
I've been struggling for... hours on a simple problem even though it seems to have been described here :How to access SVG elements with Javascript
I can't access elements of an external svg file loaded in a embed tag, even if I wait for the div or the whole window to load (I've tried several "load listeners")
I've simplified my html file into those fewlines to show you the issue :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desperate demo</title>
</head>
<body>
<div id="content">
<embed class="emb" id="maptest" type="image/svg+xml" src="star.svg">
</div>
<script type='text/javascript'>
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
var svgDoc = mySVG.contentDocument;
console.log(svgDoc);
}
</script>
</body>
</html>
Basically, the log returns "null" or "undefined" on contentDocument property call, as if there was no svg at all loaded in the DOM.
Can you see what did I miss ? It doesn't work either if I write the whole svg tag in my html instead of calling an extern file...
Try getSVGDocument() and see if it helps you:
window.onload = initAll;
function initAll(){
var mySVG = document.getElementById("maptest");
console.log(mySVG);
var svgDoc = mySVG.getSVGDocument();
console.log(svgDoc);
}
I have two separate files one with my html code and with my javaScript. What I am trying to do is create a function in javascript then call that function in the html. Both files are in the same folder along with the image. I'm new to both languages and to this site so please go easy;
I would really appreciate it if someone could help me please.`
JavaScript to load image below:
var menu = new image();
menu.src = "Fitness App Entry Scrren.jpg"
function menuScreen(){
document.getElementById("menu").getAttribute("src");
}
Html code to call function:
<!DOCTYPE html>
<html>
<head>
<body src="Functions.js">
<script onload="menuScreen()"></script>
</body>
<head>
</html>
What you are doing is against the rules of HTML. First of all, <body></body> should be outside of <head></head>. You should have <script></script> in either <head></head> or <body></body>. The <body> tag should have the onload attribute set to menuScreen(), and the <script> tag's src attribute should be set to Functions.js (as John Hascall said). By the way, John Hascall is right, there is no element with the ID of "menu" so it won't work unless you create a <div> or <iframe> with the specific ID and append the image to it in your Functions.js file.
So, your JavaScript code should look like this:
var menu = new Image(); // note that the constructor is capitalized
menu.src = "Fitness App Entry Screen.jpg";
// Create a <div> with the image within it.
var division = document.createElement("div");
division.setAttribute("id", "menu");
division.appendChild(menu);
document.body.appendChild(division);
function menuScreen() {
division.getAttribute("src"); // you can use division because it has the id of menu
}
And here is your HTML code to run the page (according to the HTML5 specifications, note that):
<!DOCTYPE html>
<html>
<head>
<script src="Functions.js"></script>
</head>
<body onload="menuScreen()">
<!-- Left intentionally blank -->
</body>
</html>
Hopefully this will help you!