This is the code I have currently come up with. It fills in the correct title, but the page does not become visible on having a page title match. How do I go about fixing this? What is the proper way of "if page title, execute this code"?
<head>
<title>Page Name 1</title>
</head>
<body>
<style>
#notavailablemsg {
font-size: 30px;
color: #f04e37;
display: inline;
}
#notavailablemsg div {
display: inline;
visibility: hidden;
}
#submsg {
font-size: 22px;
visibility: hidden;
}
#pagename {
font-style: italic;
}
</style>
<center>
<div id="notavailablemsg">
<div>The page </div>
<br>
<div id="pagename">page title</div>
<div> no longer exists</div>
</div>
<div id="submsg">
We are sorry for the inconvenience.
</div>
</center>
<script>
var errortitle = document.getElementsByTagName("title")[0].innerHTML;
document.getElementById("pagename").innerHTML = errortitle;
</script>
<script>
if (errortitle == "Page Name 1") {
document.getElementByID("notavailablemsg").innerHTML.style.visibility = "visible";
document.getElementByID("submsg").innerHTML.style.visibility = "visible";
}
</script>
</body>
</html>
#Midas answered: Modify to
document.getElementById("notavailablemsg").style.visibility = "visible";
document.getElementById("submsg").style.visibility = "visible";
You can use document.title to get current title.
Example
<!DOCTYPE html>
<html>
<head>
<title>YourGoodTitle</title>
<style>
div {
border: 1px solid red;
width: 100%;
height: 50px;
display: none; /* its good to use display: none to hide elements*/
}
</style>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<center>
<div id="notavailablemsg">
Bad title
</div>
<div id="availablemsg">
Glad you are here
</div>
</center>
<script>
function myFunction() {
var title = document.title;
if( title == "YourGoodTitle" ) {
// select and make elements visible
document.getElementById( "availablemsg" ).style.display = "block";
} else {
// hide the elements you want, make their display = none;
// for example
document.getElementById( "availablemsg" ).style.display = "none";
// show your expected elements
document.getElementById( "notavailablemsg" ).style.display = "block";
}
}
</script>
</body>
</html>
https://plnkr.co/edit/KS2obzXrUqtzT8FWUvwL?p=preview
So if your title is YourGoodTitle, YourGoodTitle message will be shown. Else Bad title will be printed
Related
This question already has answers here:
Why do I have to click this input button twice to call a function?
(4 answers)
Closed 1 year ago.
Below I have 2 pieces of code. The purpose of the code is to alternate between showing and hiding an element by clicking on the button.
Logically, I feel both pieces of code are sound and should work in exactly the same way. However, #1 functions as required whilst #2 doesn't. #2 requires 2 presses of the button to first display the element. After that, it functions as required.
I assume I have made a mistake linked to nomenclature, but I am unable to pinpoint it. Please help in doing so.
#1
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</body>
</html>
#2
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "visible") {
x.style.visibility = "hidden";
} else {
x.style.visibility = "visible";
}
}
</script>
</body>
</html>
That's happening because the x.style returns inline style for an element (the value sets on the div tag <div id="myDIV" style="/*this value*/"> and not the overall element styling) which is empty by default , think of it as any other HTML attributes like id or width.
So what you want to do, is to declare the visibility propriety inside the div like so :
<div id="myDIV" style="visibility: hidden;">
this way x.style.visibility will return 'hidden' from the first time.
Here are two snippets so you see the difference:
The same as your code just added a console.log
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
console.log('x.style.visibility = '+x.style.visibility);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
<div id="myDIV">
This is my DIV element.
</div>
</body>
</html>
and now if we set visibility as an inline style
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
console.log('x.style.visibility = '+x.style.visibility);
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
<div id="myDIV" style="visibility: hidden;">
This is my DIV element.
</div>
</body>
</html>
account for starting condition
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.visibility === "hidden" || !x.style) {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
I have a basic question that I think somebody may easily be able to answer. I have very little coding experience but just need one simple change to complete website I am making,.
I have a simple toggle similar to this example I have used. :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<text onclick="myFunction()">Try it</text>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I would like the #myDIV to disappear when clicking outside the div/container as well as disappear when clicking on the "Try it" text/button. I guess I must edit the script. I have tried for a few hours but no luck.
Could somebody help me with this? Sorry if silly / basic question.
You should get the general DOM and inverse the function like: if div clicked, display block else display none.
Add a hide class to hide myDIV. It would make it much easier JS-wise to hide and show the div. Then, let the window handle the clicks rather than the button:
var x = document.getElementById("myDIV");
var y = document.getElementById("myBtn")
window.addEventListener("click", function(e) {
if(e.target != x && e.target != y) {
x.classList.add("hide");
} else if(e.target == y) {
x.classList.toggle("hide");
}
});
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
#myDIV.hide {
display: none;
}
<text id="myBtn">Try it</text>
<div id="myDIV">
This is my DIV element.
</div>
Check out this snippet, I feel this solves your usecase.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<text onclick="myFunction()">Try it</text>
<div id="myDIV">
This is my DIV element.
</div>
<script>
window.onload = function () {
var x = document.getElementById("myDIV");
x.style.display = "none"
document.onclick = function (e) {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
/*display: none;*/
}
</style>
</head>
<body>
<text onclick="myFunction()">Try it</text>
<!--you have to add display property and the default value of it will be none-->
<!--you can add this to the style directly-->
<div id="myDIV" style="display: none">
This is my DIV element.
<!--for adding a link you have to use like this-->
Hello google
</div>
<script>
function myFunction() {
const x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
// this event will run when your left mouse down
document.addEventListener("mousedown", (event) => {
// check if the event target is not the element with id of [myDIV]
// check if the event target is not the element with id of [link] cus when you click on the link the target will be link element
if (event.target.id !== "myDIV" && event.target.id !== "link") {
const x = document.getElementById("myDIV");
x.style.display = "none";
}
});
</script>
</body>
</html>
In my javascript Program I have created a page to display an image and description at the same time when the user moves the mouseOver a link, and display a different image with no description when user moves the mouseOut of link. but I am not getting output on mouseOver/mouseOut as per expectation. Can anyone help ? I did the following:
(i) When the mouse moves over a link, I am calling the function by passing the text and image.
(ii) When the mouse moves out,I am calling the function by passing a blank text and a different image. This image is the same when the mouse is out from all the links.
code:
<!DOCTYPE html>
<html>
<head>
<style>
div a{
text-decoration: none;
font-size: 25px;
color: yellow;
}
.container {
width: 1002px;
margin-top: 50px;
margin-left: 130px;
}
#first {
width: 400px;
float: left;
height: 350px;
background-color:#f4b2ef;
border:inset;
}
#second {
width: 590px;
float: right;
height: 350px;
color: white;
border:inset;
}
</style>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<p style="text-align:center">First Place Winner</p>
<p style="text-align:center">Third Place Winner</p>
<p style="text-align:center">Merit Prize Winner</p>
<p id="para"> </p>
</div>
<div id="second">
<img id="default" src="images/default.jpeg" alt=""
width="590" height="350"/>
</div>
</div>
<script>
var blank = "";
var txt = "Beautiful fall";
var txt2 = "Natural pictures are beautiful";
var txt3 = "Beautiful Rose garden"
var w1 = new Image(590, 350);
var w2 = new Image(590, 350);
var w3 = new Image(590, 350);
var def = new Image(590, 350);
w1.src = "images/w1.jpeg";
w2.src = "images/w2.jpg";
w3.src = "images/w3.jpg";
def.src = "images/default.jpeg";
function replaceImg(txt, w1) {
w1.src;
var para = document.getElementById("para").innerHTML = txt;
}
function defaultImg(blank, def) {
def.src;
var para = document.getElementById("para").innerHTML = blank;
}
</script>
</body>
</html>
I amputate your code just to demonstrate that you can make it work by using js function addEventListener("moustover",callback) to do the work. I have never wrote code in your way so I don't know how to improve upon yours. You should always seperate your html css and js codes.
var firstTarget = document.querySelector("#first");
firstTarget.addEventListener("mouseover",function(){
document.querySelector("#target-image").setAttribute("src",'https://via.placeholder.com/350x150)');
})
firstTarget.addEventListener("mouseout",function(){
document.querySelector("#target-image").setAttribute("src",'#');
})
<!DOCTYPE html>
<html>
<head>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
First Place Winner</p>
</div>
<div>
<img id="target-image" src="#" alt="">
</div>
</div>
This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 6 years ago.
Hi there I'm having a problem. I made a box of blue color in HTML/CSS and want javascript to alert the name of color when the box is clicked. Here is my code.`
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
You need to use getComputedStyle(). .style is use to set a new value for target element.
var div = document.getElementById("box"), // element
divCSS = window.getComputedStyle(div), // element CSS
bgColor = divCSS.getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(bgColor);
}
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
<div id="box" class="box"></div>
Here is the working code
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
<script>
/* var clr = document.getElementById("box").style.backgroundColor;*/
document.getElementById("box").onclick= function() {
var ele = document.getElementById("box");
var style = window.getComputedStyle(ele);
var bColor = style.getPropertyValue("background-color");
alert(bColor);
}
</script>
This works
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="box" class="box" style="height: 100px;width: 100px;background-color: blue;margin: 0px;display: inline-block;"></div>
</body>
</html>
You can also use below code with provided html
<script>
var clr= window.getComputedStyle(document.getElementById("box")).getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(clr);
}
</script>
Try using the variable clr inside the function.
Also invoke the fucntion using onclick on the div itself.
Using regex to get the property backgorund color in whole css.
You can also use filter on #box using
var boxCss = clr.match(/#box{((.*\s*.*)*)}/g);
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function colorAlert() {
var clr = document.getElementsByTagName("style")[0].innerHTML;
var res = clr.match(/background-color:.*;/g);
alert(res[0]);
}
</script>
<style>
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box" onclick="colorAlert();">
</div>
</body>
</html>
You have two ways to solve this :
keep <script> tag after after closing <div> tag
move clr var in side the onclick function,then you can write <script> tag where ever you want
Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.