I want to get an image from an object in JavaScript and display it via HTML.
The text parts are working fine, like the movie name etc., but I cannot see my image. The only thing I see is black_adam.jpg as text.
The image is in the same folder as my index.html. I tried to add a slash in front of imgFile: "/black_adam.jpg".
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- FAVICON -->
<link rel="icon" type="image/png" sizes="32x32" href="#" />
<!-- FONTS -->
<!-- ICON LIBRARY -->
<!-- PROJECT STYLES -->
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
.movie {
width: 200px;
height: 300px;
background-color: black;
color: #fff;
}
</style>
</head>
<body style="font-family: 'Segoe UI', sans-serif">
<div class="movie">
<div class="img"></div>
<h2 class="movie-title">/h2>
<p class="release"></p>
<p class="duur"></p>
<p class="cast"></p>
</div>
<script>
const movieEl = document.querySelector(".movie");
const movie = {
id: 1,
name: "Black Adam",
description:
"Nearly 5,000 years after he was bestowed with the almighty powers of the Egyptian gods-and imprisoned just as quickly-Black Adam (Johnson) is freed from his earthly tomb, ready to unleash his unique form of justice on the modern world.",
releaseYear: 2022,
runtime: "2 hr 4 min",
rating: 6.9,
cast: ["Dwayne Johnson", " Aldis, Hodge", " Pierce Brosnan"],
imgFile: "black_adam.jpg"
};
movieEl.innerHTML =
`
<div class="img">${movie.imgFile}
<h2 class="movie-title">${movie.name}</h2>
<p class="release">${movie.releaseYear}</p>
<p class="duur">${movie.runtime}</p>
<p class="cast">${movie.cast} </p>
</div>
`
</script>
</body>
</html>
Why does it not work this way?
The reason you're seeing your file name as text is that you've done nothing to display the image as an image in your HTML
The line <div class="img">${movie.imgFile}, aside from not having a close tag for your </div>, should be written as follows
<div class="img">
<img src="${movie.imgFile}" />
</div>
or in a single line if you prefer
<div class="img"><img src="${movie.imgFile}" /></div>
Related
Upon clicking the refresh button a random video from "Folder" should appear. This works well until I decide to integrate CSS via <link rel="stylesheet" href="site.css" /> (The HTML file is site.html). Only a gray box appears and when inspecting it does show the source to be an mp4 file from "Folder" but does not show. Removing the CSS link allows it to work again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="site.css" />
</head>
<body>
<header>
<h1>Generator</h1>
</header>
<main>
<section>
<article>
<video height="800px" controls >
<source id="vsrc" />
</video>
<script>
document.getElementById("vsrc").src = "./Folder/" + Math.floor((Math.random()*266)+ 1) + ".mp4";
</script>
</article>
<article>
<p><input type="button" value="Refresh" onClick="refresh(this)"></p>
<script>
function refresh(){
window.location.reload("Refresh")
}
</script>
</article>
</section>
</main>
</body>
</html>
So my problem is that when i click on a radiobutton to add the class "completed", it does what is suposed to do, but when i want to remove it, i need to click two times, i don't know why. Any help would be appreciated. Thank you
html
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link rel="stylesheet" type="text/css" href="TodoApp.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ------ Meta Tags ------ -->
</head>
<body>
<div id="container">
<div id="topImage">
<h1 id="topImage-title">T O D O</h1>
<img onclick="test()" id="moon" src="images/icon-moon.svg">
<img src="images/bg-mobile-light.jpg" width="100%" height="100%">
</div>
<div class="newToDo">
<input onclick="addTask()" id="ready" type="radio" name="ready">
<input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>
<div id="tasksBox">
<div class="newTasks">
<input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
<span>Complete Online Javascript Course</span>
<div onclick="deleteTask()" class="delete"></div>
</div>
</div>
</div>
<script src="jquery_library/jquery-3.5.1.min.js"></script>
<script src="TodoApp.js"></script>
</body>
</html>
css
.completed{
background-image: url(images/icon-check.svg);
background-position: center;
background-repeat: no-repeat;
}
javascript
function completeTask(){
$(".newTasks").click(function(){
if ($(this).children().hasClass('completed')){
$(this).children().removeClass('completed');
} else {
$(this).children().addClass('completed');
};
});
}
Hello everyone i am making drag and drop web application. I am not able to run console.log("Dragging element"); inside addEventListener. Can anyone help me with this.
Below are 2 files that i have made yet
index.js
const dropZone=document.querySelector(".drop-zone");
dropZone.addEventListener("dragover",(e)=>{
console.log("Dragging element");
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inShare - Easy file sharing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="upload-container">
<div class="drop-zone">
<div class="icon-container">
<img src="./file.svg" alt="File icon" draggable="false" class="center">
<img src="./file.svg" alt="File icon" draggable="false" class="left">
<img src="./file.svg" alt="File icon" draggable="false" class="right">
</div>
<div class="title">Drop your files or,<span class="browseBtn">browse</span></div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
I'm trying to transfer an image element, which is hosted on the cloud, from one file to another but it's not working.
I tried to insert the image in the HTML when it loads but it's telling me that the image variable is null.
MY FIRST HTML FILE(source file)
<div class="card">
<img src="https://res.cloudinary.com/mo1/image/upload/v1564584621/kobe_lq48jt.jpg" id="mentorPicOne" alt="">
<strong><p>Kobe Bryant </p></strong>
<div class="mentor-info">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<ul>
<li><strong>Bio: </strong> A 44-year old husband and father of 2.</li><br>
<li><strong>Occupation: </strong> Retired professional basketball player</li><br>
<li><strong>Expertise: </strong> 5 years</li><br>
<button class="reach-btn" onclick="openPage()"> Reach Out</button>
</ul>
</div>
</div>
MY SECOND HTML FILE (destination file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../images/accusoft.png">
<link rel="stylesheet" href="../assets/css/all.css">
<link rel="stylesheet" href="../css/my_mentor.css">
<title>Free Mentors | My Mentor </title>
</head>
<body onload="onload()">
<div class="main-container">
<header class="header">
<a class="logo" href="/">
<span id="logo-icon">
<i class="fab fa-accusoft"></i>
</span>
<h3>Free<span id="free-mentors">Mentors</span></h3>
</a>
<div class="register-buttons">
<button class="button">Back</button>
<button class="button" id="admin-dash">Log Out</button>
</div>
</header>
<h2>My Mentor</h2>
<main class="content-container">
<div class="selected-mentor">
</div>
</main>
<footer class="footer">
<p>© Free Mentors 2019</p>
</footer>
</div>
</body>
<script src="../js/my_mentor.js" type="text/javascript"></script>
</html>
JavaScript File (my_mentor.js)
const mentorPicOne = document.getElementById('mentorPicOne'); ;
const selectedMentor = document.querySelector('.selected-mentor')
console.log('The selected', mentorPicOne)
openPage = async ()=>{
window.location.assign('./my_mentor.html');
}
function onload(){
selectedMentor.innerHTML = mentorPicOne;
}
I want to be able to click the React Out button, hence executing the openPage function, and then go the my_mentor page having the image inside of it.
I'd really appreciate your help. Thanks.
what do you mean by transferring from one file to other? its just a url, it can be placed in both pages. the image is not really on the page, its requesting it from your url and showing it in your html.
Well, I have this slider wich is workin' with parallax content slider! And I would like to have the image at the place of the text and vice versa! I've come to change it but as soon as I pass to the next slider it returns to it initial position!
.da-slide-current .da-img {
left: 10%;
opacity: 1;
}
jsfiddle
Any way I can achieve that? Much appreciated.
You can play with the div positions:
<html lang="en" class=" js cssanimations csstransitions"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Content Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Parallax Content Slider with CSS3 and jQuery">
<meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI">
<meta name="author" content="Codrops">
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css">
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
</head>
<body>
<div class="container">
<div id="da-slider" class="da-slider" style="position:relative;">
<div class="da-slide da-slide-current" >
<h2 style="position:absolute;top:50%;">Warn WWelcome</h2>
<p style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<div class="da-img"><img src="images/1.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Easy management</h2>
<p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="da-img"><img src="images/2.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Revolution</h2>
<p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<div class="da-img"><img src="images/3.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Quality Control</h2>
<p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<div class="da-img"><img src="images/4.png" alt="image01"></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
</body></html>
http://jsfiddle.net/YakV7/36/