Unable To Change CSS JavaScript - javascript

I just want to set display property of one of my div to block based on event, by default its 'none'
Its not happening with error: Cannot set property 'display' of undefined
Below is my code. Please suggest.
HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="ISO-8859-1">
<title>Sample Mod Pop UP</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body class="body">
<div class="popUp" id="id1">
<p>Are You Sure You Want to Quit?</p>
<span>&#10006</span>
</div>
<button onClick=closeWindown() class="btn">Close</button>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JavaScript
function closeWindown(){
document.getElementsByClassName("popUp").style.display="block";
}

getElementsByClassName gets a nodeList, so you have to iterate
function closeWindown(){
var elements = document.getElementsByClassName("popUp");
for (var i=elements.length; i--;) {
elements[i].style.display = "block";
}
}
As a sidenote, querySelectorAll('.popup') has better support, but is non-live.

Related

Why does this JavaScript work in <script> tag but not with src

JS:
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body onload="siteTitle()">
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">
a
</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I have tried changing it multiple times with things I have found from other questions and website but I cannot fix this
The script worked when placed directly in the tag but not when imported
Thank you for your help
The following codes works for me well.
If these codes doesn't work for you, check your browser and update it.
try
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<h1 id="site-title" class="title">Site Title</h1>
<div class="box-container">
<div class="left-box">a</div>
<div class="right-box">
<h1 class="title-in">abc</h1>
a
</div>
</div>
</body>
</html>
with
window.onload = () => {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Since you're calling the function from <body onload="siteTitle()"> you need to define it with a normal function definition, not by assigning to window.onload.
function siteTitle () {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
Try giving a name to your function like this
window.onload = function siteTitle() {
const element = document.getElementById("site-title");
element.innerHTML = "New Heading";
};
because you are giving siteTitle as a function but it is a parameter
I am not sure but it can work for you.

Change meta tag content dynamically through javascript

I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.

After appending inputs to imported DOM element it's becoming disabled

My problem is when I try to append an input box it becomes non-active. I mean I can't put anything into it.
I'm using a HTML-import and I append input into imported element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/19enter code here99/xhtml">
<head>
<meta charset="utf-8" />
<title>Feedback Form</title>
<link rel="import" href="background.html">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<body>
<script>
var link = document.querySelector('link[rel=import]');
var content = link.import.querySelector('#background');
document.body.appendChild(content.cloneNode(true));
</script>
<div id="email_form">
<p>E-mail: <input type="email" id="email_from_email" name="email_from_email" /></p>
</div>
<script>
$("#email_form").appendTo("#maincontent"); //here I append input
</scrit>
</body>
</html>
background.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="background.css" />
</head>
<body>
<div id="background">
<div class="background" id="menucontent">
<!--some code here-->
</div>
</div>
<div class="background" id="maincontent">
<!--An input is appendend but I can't put anything in-->
</div>
</div>
</body>
</html>
The element #maincontent is not in the main document index.html, but in the imported document background.html.
So you cannot select it with the jQuery library using .appendTo( "#maincontent" ).
Instead you should select it the same way you did with #background:
var maincontent = link.import.querySelector('#maincontent');
Note: I don't see why you would like to insert some element in the imported document, that is not rendered. Usually we perform the operation in the opposite direction.

Open window and access its element from the parent window

Even though there are similar questions to mine js open popup window and acces it's element in another page , the solution there didn't work for me ..
I am trying to open a window onclick, and then access a certain element and edit its content , but it's not working..
Here is the parent html
<!doctype html>
<html>
<head>
<title>Parent</title>
<script src="opener.js"></script>
<meta charset="utf-8"/>
</head>
<body>
<button class="w3-btn w3-container" id = "submit_btn">Submit</button>
</body>
</html>
Child html
<!doctype html>
<html>
<head>
<title>Pre:D</title>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<meta charset="utf-8"/>
</head>
<body>
<input class="w3-input" type="text" id="input_word" placeholder="enter your word here">
<div id="dump" style = "width: 800px"> </div>
</body>
</html>
and here is the opener.js script
window.onload = function(){
document.getElementById("submit_btn").onclick= run;
};
function run(){
var myWindow = window.open('child.html', "width=850,height=600");
myWindow.onload = function() {
myWindow.document.getElementById("dump").innerHTML = 'Janela: ';
}
}
Best

How to Hide a HTML Button

I have a button that calls a function when it is clicked. I want it to hide when some one clicks on it.
HTML:
<DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="Displayer"></p>
<button onclick="Set()">Ready?</button>
<script type="text/javascript" src="javascript.js">
</script>
</body>
</html>
Pass in your element and then set the display style to none:
HTML:
<button onclick="set(this)">Ready?</button>
Javascript:
function set(elem) {
elem.style.display = "none";
}

Categories