Im just learninng javascript, and wanted to play around, but looks like the script doesnt connect to html page. I dont understand why.
thats in html:
<body>
<main>
<div class="tank">
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer" onclick="hiGirl()>
</div>
</main>
<script type="text/javascript" src="script.js"></script>
</body>
And thats in script.js:
document.addEventListener("DOMContentLoaded", function (event) {
window.alert('Hi, Im tank Girl')
})
document.getElementById('tank2').onclick = function hiGirl () {
var userName = window.prompt('What is your name?', 'Enter your name here.')
if (userName) {
window.alert(`Szia Mia ${userName} !`)
} else { window.alert('Hello Stranger!') }
}
You have an syntax error on onclick in img tag, correct it:
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer" onclick="hiGirl()">
Or just basically remove it as below because you added a onclick handler in script.js, so no need to use it on img tag:
<img id="tank2" src="tank.gif" alt="Tank Girl" style="cursor:pointer">
Related
story: hide the iframe if the .php is deleted or similar. So i try to hide the div that contains the iframe. Website of customer A can iframe a video from my website (external-website). But if the video is deleted, it should hide the complete iframe (the div). The complete php will be deleted or renamed if the video is not available.
Hide the <div> if external file (i want to iframe)
is not available or named as .php?=123456 or has not a <div "id", whatever.
The inline style never changes.
I tried each of this above, i don`t get it working.
I can edit the external .php file (my website too).
I do not get the script to change the inline style whatever i try.
What i want to do, hide the div if "something".
<div id="hide-me">
<iframe src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
function yourFunctionName () {
var anyname = document.getElementById("hide-me").style.display;
if(document.getElementById("id-in-external-php").src == 'https://www.external-website.com/subfolder/1250.php'){
document.getElementById("hide-me").style.display="block";
} else {
document.getElementById("hide-me").style.display="none";
}
}
</script>
I asked a similar question here, but it did not give a solution
enter link description here
content of https://www.external-website.com/subfolder/1250.php :
<div id="id-in-external-php">this is content for the iframe</div>
This is how I ran your code again and it worked, so you can try it:
<div id="hide-me" style="display: none;">
<iframe style="display: none;" id="id-in-external-php" src="https://www.external-website.com/subfolder/1250.php" style="background-color: white;border: 0;height: auto;text-align:center;width: auto;max-height: 100%;" scrolling="no"></iframe>
</div>
<script>
const yourFunctionName = () => {
const anyname = document.getElementById("hide-me");
const frameId = document.getElementById("id-in-external-php");
const check = frameId.contentDocument.body.children
const c = check[0].innerText;
if(c.startsWith('Cannot')) {
anyname.style.display="none";
frameId.style.display="none";
} else {
anyname.style.display="block";
frameId.style.display="block";
}
}
window.addEventListener("load", yourFunctionName, false);
</script>
I did not see where you invoked the function, so i invoked mine when window load
There is requirement where I need to copy HTML code on click of button. The functionality is not working where we are using a video tag. The video tag somehow gets formatted by brightcove. I tried using <pre> and <code> elements. Can you please suggest something.
$('.copy').on('click', function() {
var section = $(this).next().find('code').html();
var elem = document.createElement('textarea');
//elem.textContent = section;
elem.innerHTML = section;
//elem.classList.add('invisible');
document.body.appendChild(elem);
console.log(elem.innerHTML);
elem.select();
console.log("Hi");
try {
document.execCommand('copy');
} catch (e) {
console.log('ERROR: ' + e);
} finally {
elem.remove();
}
});
<div class="ply-item-ratio-content">
<!-- Start of Brightcove Player -->
<div class="parbase brightcovevideo section">
<div style="margin-bottom: 0;margin-left: 0;margin-right: auto;margin-top: 0;overflow-x: hidden;overflow-y: hidden;text-align: center;width: 1025px;text-align:left; height: 560px;">
<div id="25efba484"> </div>
<script type="text/javascript" src="/etc/polycom/www/global/js/thirdparty/BrightcoveExperiences_embedded.js"></script>
<script>
customBC.createVideo("1000", "567", "4223245001", "cd~~,AddB-EKwxDE~,eUqCcdvdv7u6CqAyJC", "4435446654001", "2768ede1a35dsgfdgffba484");
</script>
</div>
</div>-->
<!-- End of Brightcove Player -->
</div>
</div>
<div class="ply-global-video-description">
<h2>NATO Communications and Information (NCI) Agency Success Story</h2>
<p>Centro to create a relaxed working environment that draws teams closer together and enables better sharing of ideas and insights.</p>
</div>
</div>
I have a problem. I have two .html files.
<!DOCTYPE html>
<html><head>...</head>
<body>
<ul><li id="home"><a>Home</a></li></ul>
<div class="content"></div>
<script type="text/javascript" src="Javascripts/navigation.js"></script>
</body>
</html>
and
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded">
</div>
<div id="textPanel" style="background:blue;"></div>
In my navigation.js I load the second .html file into the "content"-div of the first .html:
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
$('#textPanel').height( $('#imgPanel').height() );
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
The loading works! My question is now:
How can I get the id of the div's of the second .html I loaded into the first one?
The var = $("#textPanel"); is null.
Since the content gets loaded asynchronously, you might want to change your code like this, to execute $('#textPanel').height() when it is available:
function home(){
content.load("home.html", function(){
$('#textPanel').height( $('#imgPanel').height() );
});
}
From this specification of callbacks
EDIT
Alternative:
HTML of loaded content
<h1>Welcome!</h1>
<div id="imgPanel" style="background:red;">
<img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()">
</div>
<div id="textPanel" style="background:blue;"></div>
JavaScript
$(document).ready(function () {
var content = $(".content");
var a = $("#home");
home();
function home() {
content.load("home.html");
}
a.on("click", function () {
home();
});
});
function setHeight(){
$('#textPanel').height($('#imgPanel').height());
}
Please tell me how to send div id as a parameter to javascript function onclick in a link of a page to open it via javascript. I want to send div id to open that particular link.
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction()>Ostrig</a>
<script type="text/javascript">
function MyFunction(anchor) {
document.getElementById('achor').click();
}
</script>
Use this way -
function myFunction(x) {
document.getElementById('showId').innerHTML = x.parentElement.id; // x.parentElement.id gets the parent div then its id value
}
<div id="div1">
Click Me <!-- pass this to the function -->
</div>
<br />Div's id: <span id="showId">
</span>
The above code was just for simplicity. For your sample code -
<div id="div1">
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction(this)>Ostrig</a>
</div>
<script type="text/javascript">
function MyFunction(anchor) {
alert(anchor.parentElement.id); // Will return div1
alert(anchor.id); // Will return anchor22
}
</script>
Sorry if this is already asked, but i could not find my exact error. I want the image to change as i mouse over and change back as i mouse off. For some reason i get the alert messages, but the actual images do not change.
This is my J script
function altimage(){
alert("hi");
document.getelementbyid("header").innerhtml="This is good";
document.getelementbyid("homeicon").src="homelogoalt.jpg";
}
function normimage(){
alert("bye");
document.getelementbyid("homeicon").src="Homelogo.jpg";
}
and this is my div that hold the image i would like to change:
<div class="search" onmouseenter="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Javascript is case-sensitive so:
document.getelementbyid = document.getElementById
innerhtml = innerHTML
Make you JS as follows:
function altimage(){
//alert("hi");
document.getElementById("header").innerHTML="This is good";
document.getElementById("homeicon").src="homelogoalt.jpg";
}
function normimage(){
//alert("bye");
document.getElementById("homeicon").src="Homelogo.jpg";
}
And you HTML should be like the following:
<div class="search" onmouseover="altimage()" onmouseout="normimage()" style="width:30px;z-index:4;">
<img src="homelogo.jpg" alt="Home" class="menu" style="width:30px;height:30px;" id="homeicon">
</div>
Hope it helps!
Thanks