HTML/Javascript button doesn't return alert - javascript

I made a HTML page with a button, that displays a message saying: "This is a message". Everything looks fine, but when I press the button don't get a message. I checked for any mistakes, but I couldn't find anything. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<title>Testing JavaScript</title>
<link rel="stylesheet" type="css" href="Button.css">
</head>
<body>
<h1>Javascript</h1>
<p>I am testing JS on this page.<br/>
This is a button.</p>
<script>
var message = "This is a message";
function popUp()
{
alert(message);
}
</script>
<button type="button" onclick="press()">Press me!</button>
</body>
</html>

You should call to onclick="popUp()"

Instead of onclick="press()":
onclick="popUp()"

You dont have a function named as "press()" declared, change the code
<!DOCTYPE html>
<html>
<head>
<title>Testing JavaScript</title>
<link rel="stylesheet" type="css" href="Button.css">
</head>
<body>
<h1>Javascript</h1>
<p>I am testing JS on this page.<br/>
This is a button.</p>
<script>
var message = "This is a message";
function popUp()
{
alert(message);
}
</script>
<button type="button" onclick="popUp()">Press me!</button>
</body>
</html>

Related

adding Event Listener

i am facing a problem with event add event listener function it don't give an error it is just not working i even listened to videos copied and pasted other codes to work and modify my html to work with but it add event listener doesn't work here is my code bellow
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<script type="text/javascript" src="checkthisout.js">
y = document.getElementById("input").addEventListener("click", myFunction);
if(y){
function myFunction() {
alert("hello world")
}
}
</script>
<input holder="password" value="replace here" id="input"/>
</body>
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body onload="init()">
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<input holder="password" value="replace here" id="input"/>
<script type="text/javascript">
function init() {
document.getElementById("input").addEventListener("click", myFunction);
}
function myFunction() {
alert("hello world")
}
</script>
</body>
Here is the solution.
You have to wait that the DOM has been loaded before manipulate it.
Moreover you can't have src attribute in this script tag.
Your script is running before the input is generated so it's probably not finding it. Try putting the script at the end or use Jquery's document.ready function.
<!DOCTYPE html>
<html>
<head><title>Main page of a simple website</title>
<link rel="stylesheet" type="text/css" href="mstn.css"/>
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
click here to go to google
here
<p id="demo">testing testing testing </p>
<p>testing testing testing</p>
<h1>whats little g</h1>
<input holder="password" value="replace here" id="input"/>
<script type="text/javascript" src="checkthisout.js">
function myFunction() {
alert("hello world")
}
document.getElementById("input").addEventListener("click", myFunction);
</script>
</body>
Your order of html and scripts matters and also you cant have function defined inside if(y){}, because that function defination scope is under 'if' which is not available to addEventListner level. Try this:
<input holder="password" value="replace here" id="input1"/>
<script>
y = document.getElementById("input1").addEventListener("click", myFunction, false);
function myFunction() {
alert("hello world")
}
</script>

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";
}

How can I call a javascript function from an html file

I have a .js file defined as follows:
<script>
function sayHello() {
alert("Hello World");
}
</script>
And I have a .html file defined as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/testCSS.css">
<title>test html</title>
</head>
<body>
<script type="text/javascript" src="js/testJS.js"></script>
</body>
</html>
How can I call the sayHello() function?
script.js
function sayHello() {
alert("Hello World");
}
index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
<script>
sayHello();
</script>
</body>
</html>
You just need to call it!
let me explain in an example.
let's say you have a button in that html that calls sayHello function.
<button type="button" onclick="sayHello ()">Say hello</button>
I think you should take a look at here.
Jus replace the link to script with content of .Js file...
Or call the function
<script>
sayHello()
</script>

Button Failing to Perform Function jQuery

I'm trying to make a button, so that when pressed it slides one div away and then another slides back in, however I'm trying to prevent it from refreshing the page but the
return false;
line seems to break the script. Any ideas?
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<button id="button1" onclick="nextSlide('#1', '#2')">Hide it</button>
<p id="1">Hide this text</p>
<p id="2">Show this text</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
JS:
window.onload=function(){
$('#2').fadeOut(1);
};
function nextSlide(hideDiv, showDiv) {
$(hideDiv).hide("slide", 2000, function(){
$(showDiv).show("slide", 2000);
});
return false;
};
Why do you have to return anything? Is there another method dependent on getting "false" back?

Categories