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.
Related
This code is more likely referenced to the yt i watched since im still a newbie in web developing(front-end). I am building a sidebar but my js returns the message from the title I mentioned "Uncaught TypeError: Cannot set properties of null (setting 'onclick')".
const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');
sidenavbtn_menu.onclick = function() {
sidebar.classList.toggle('open')
}
<!doctype html>
<html lang="en">
<head>
<title>wRBMS</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---CSS Link-->
<link rel="stylesheet" href="home_dashboard.css" type="text/css">
<!---MATERIAL CDN Google-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="sidebar" id="">
<div class="logo-contents">
<div class="logo">
<img href="#">
<div class="logo-name">w<span>RBMS</span></div>
</div>
<span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
</div>
<ul class="sidenav-list">
<li>
<a href="#">
<i class="material-symbols-sharp">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-symbols-sharp">monitoring</i>
<span>MFO</span>
</a>
</li>
</ul>
</div>
</div>
[enter image description here][1]
</body>
</html>
The issue lies in the following lines:
const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');
document.querySelector() needs a css-like selector-string. If you want the Selector to match the ID-Field, you need to add # at the beginning. document.querySelector('#sidenavbtn_menu')
If you want to match the class field document.querySelector('.CLASS_VALUE')
More Information are found here:
CSS-Selectors
But i would suggest to use the method document.getElementById('sidenavbtn_menu') as it is more optimized for this scenario.
You need to specify if it is a class or id using . for class and # for id.
const sidenavbtn_menu = document.querySelector('#sidenavbtn_menu');
const sidebar = document.querySelector('.sidebar');
sidenavbtn_menu.onclick = function() {
sidebar.classList.toggle('open')
}
<!doctype html>
<html lang="en">
<head>
<title>wRBMS</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!---CSS Link-->
<link rel="stylesheet" href="home_dashboard.css" type="text/css">
<!---MATERIAL CDN Google-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="sidebar" id="">
<div class="logo-contents">
<div class="logo">
<img href="#">
<div class="logo-name">w<span>RBMS</span></div>
</div>
<span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
</div>
<ul class="sidenav-list">
<li>
<a href="#">
<i class="material-symbols-sharp">home</i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="material-symbols-sharp">monitoring</i>
<span>MFO</span>
</a>
</li>
</ul>
</div>
</div>
[enter image description here][1]
</body>
</html>
If you want to use document.querySelector you have to specify if it's an id, class or else. Ex : document.querySelector('#sidenavbtn_menu');, you could also use document.getElementById('sidenavbtn_menu');
document.querySelector('.sidebar'); will return the first element of the array of elements having .sidebar. If you want to select all elements with a class you could do document.querySelectorAll(".someClass").forEach((e) => {e.doSomething();});
The Problem
I'm following an intro to JS course on Udemy. The course section is updating a span element by calling a JS function from a separate JS file. I figured I might be linking the scripts in the wrong order, but switching the order does nothing. Also, I know the file paths are right since an alert() function works fine. The file with the functions is imported before the file that calls it.
Edit
I just realized that the console browser is giving me this error:
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at outputResult (vendor.js:15:35)
at app.js:5:1
I'm sure I'm making an obvious, rookie mistake. Any help diagnosing this would be appreciated.
Here's the HTML and JS files below. The 'vendor.js' file holds the functions, and 'app.js' calls them. I'm specifically trying to update the element with id='current-result' by calling the outputResult function located in 'vendor.js'. I'm expecting the element with that id to update to 10, as that is what I'm assigning to currentResult in app.js.
<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" />
<title>Basics</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/styles/app.css" />
<script type="text/javascript" src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript" src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
</html>
Vendor.js
const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');
function outputResult(result, text) {
currentResultOutput.textContent = result;
currentCalculationOutput.textContent = text;
}
app.js
let currentResult = 0
currentResult = currentResult + 10
outputResult(currentResult, '')
You are importing the Vendor.js at the top of the html file.
Inside the Vendor.js file, you are trying to access document.getElementById('current-result') and document.getElementById('current-calculation'). Will this be available inside Vendor.js? No. Because these DOM elements will be available only once the DOM is loaded.
How to fix this?
You have to ensure that the DOM elements that you are trying to use are available while you are running the script
This can be fixed in two ways.
Option 1
Import Vendor.js at the bottom of body tag. This will loads the script file once the DOM has been loaded. So your dome elements with id 'current-result' and 'current-calculation' will be available inside Vendor.js file.
Like
<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" />
<title>Basics</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/styles/app.css" />
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
<!-- Import here -->
<script type="text/javascript"
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript"
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</html>
Option 2
Load scripts asychronously by ising async attribute in the script import. This will parse the script file only once the DOM content has been loaded.
Like
<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" />
<title>Basics</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/styles/app.css" />
<script type="text/javascript" async
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript" async
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
</html>
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 have tried everything in order to fix the issue and even looked at the video of the tutorial im learning from but can't seem to get it working crrectly. Even checked around the internet. i added the javascript code so you guys can see that i did define it. im new to all this so explaining it best you can would be greatly appreciated
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick='ageInDays()'>Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
function ageInDays() {
let birthYear = prompt("what year were you born...Good friend?");
}
It not working because you are using in line script for the invocation of the ageInDays function, but the definition is in another file that has not loaded when the browser read the inline JS so there are two ways of fixing this.
Use an inline script so the JS is already on the browser same time as HTML like
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script>
function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); }
</script>
</body>
</html>
handle everything in the script file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" id="action">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and in the main.js
const button = document.getElementById('action');
button.addEventListener('click', function(){
let birthYear = prompt("what year were you born...Good friend?");
});
Add this to your script.js file, and remove onclick='ageInDays()' from your button.
let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", ageInDays);
function ageInDays(){
//code to be executed when you clicked the button
}
I am working on a html which already works integrated on a application. On this html there was 3 buttons and I add new one. This 3 button showen together when you click anyone on screen but new one do not seem. How can its possible. How can I solve this problem.
This is what I want:
(When I click Navigation button all buttons seen, but when I click another button new button do not seem which named 180 day Documents)
This situation valid for all button without "Navigation" but I could not load picture. I mean when You click to second button too, New button do not seem.
When you click Third button:
(Same problem valid too when click view button)
For this html there was a ready html and I add new button on it.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" type="text/css" href="css/pwietp.css" media="screen" id="screenCSS" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" id="printCSS" />
<link rel="stylesheet" type="text/css" href="css/evoslider/evoslider.css" />
<script type="text/javascript" src="js/jquery.combined.js"></script>
<script type="text/javascript" src="js/ietp-common.js"></script>
<script type="text/javascript" src="js/ietp-nav.js"></script>
<script type="text/javascript" src="js/ietp-search.js"></script>
</head>
<body>
<div id="wrapper"><div id="bar">
<div id="menu">About</div>
<div id="logoDiv"><img id="logo" src="images/logo.png" /></div>
<form id="search_toolbar" method="get" action="/solr/select">
<input id="searchinput" type="text" name="q" value="search" size="28" maxlength="140" onfocus="searchBarOnFocus(this)" onblur="searchBarOnBlur(this)" />
</form>
</div>
<div id="tabcontainer">
<div id="tabs" class="nav">
<span><a id="navtab" href="#" class="btn-highlight">Navigation</a></span>
<span><a id="searchtab" href="/solr/select" class="btn">Search</a></span>
<span><a id="viewtab" href="#" class="btn">View</a></span>
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
<div class="outer-container"><div class="container">
<div id="navigationContainer"><div class="navSection">
<div class="outer-container"><div class="container">
<div class="header navigationPMTitle"><span class="crumb" id="crumb">
Home
<span>|</span>Issue No: 013<span>|</span>Issue Date:
2017-02-01</div></div><div id="navSortButtons" class="header navSortButtons">Sort by:
Tile
Techname
Infoname
DMC</div></div>
<div class="navSection"><div id="navigationFolders">
<div class="navTitleDiv"><h3 class="removeBottomPadding">Contents</h3></div>
<div id="navigationFoldersDiv">
<ul class="treeView" name="treeView">
</ul>
</div></div>
<div id="navigationDocuments">
<div id="navDocumentsTitleSection" class="navTitleDiv hide"><h3 class="removeBottomPadding" id="navDocumentsTitle"></h3></div>
<div id="navigationDocumentsDiv"></div></div></div></div></div></div>
<div id="footer">
International Aero Engines Proprietary Information © 2014 - 2017.
EAR Export Classification: Not subject to the EAR per 15 C.F.R. Chapter 1, Part 734.3(b)(3).</div></div>
</body>
</html>
Actually, if i copy your code (only the span tags) and i remove the closing span after the <a id="180dayDocumentsTab"> all the span tags show up on my screen. Remove the </span> after this anchor tag and you'll be good to go.
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
Close the <span class="crumb" id="crumb"> because it's ruining your divs after that. Use fiddle Tidy option to help you get a nicer code and it will help you get a look on missing closing tags or any other small code errors. A clear code will make you spot any mistake much faster.