I want to make button to load a html page using javascript. (Like Ajax Codes I don't want the page redirection)....
but the code can't load html page & i want it to fill the page view.
so here is the code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById("demo").innerHTML='<object type="type/html" data="register.html" >
submit</button>
<p id="demo"></p>
</body>
</html>
try like this:
<!DOCTYPE html>
<html>
<style>
#demo{
width:700px !important;
height:600px !important;
}
</style>
<script>
function loadPage(){
document.getElementById("demo").innerHTML="<object type='type/html' data='register.html' >";
}
</script>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="loadPage();" >
submit</button>
<p id="demo"></p>
</body>
</html>
note: here register.html and this file should be in same folder or give relative path.
You have to escape the double quotes.
Example:
<button type="button"
onclick=" document.getElementById(\"demo\").innerHTML=
'<object type=\"type/html\" data=\"http://www.target.com/register.html\">' ">
submit</button>
Related
My code is supposed to change the text of a paragraph.
The code- (both .js and .html files)
<!DOCTYPE html>
<html>
<head>
<title>Java's Crypt</title>
</head>
<body>
<p Id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
<script src="crypt.js"></script>
</body>
</html>
(javascript file)
function myFunction() {
document.getElementById("bello").innerhtml = "toldya";
}
First there is id not Id in HTML
<p id="bello">i will change</p>
and in JS, You can use textContent or innerText to change text
document.getElementById("bello").textContent = "toldya";
function myFunction() {
document.getElementById("bello").textContent = "toldya";
}
<p id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
As per Jax-p's comment, document.getElementById("bello").innerText = "toldya"; should work.
Also, it is best practice to use lower case for your html attributes e.g. Id should just be id
I am trying to change the font size by clicking on button and using paragraph id
Trying to create a button which is on click will change the font size of my first javascript
code :-
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</script>
</body>
</html>
my output is coming : JavaScript in Body
actual output which i want to come:
JavaScript in Body
My First JavaScript
button(click me)
You should get the button out of the script tag.
it should look like this.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<button type="button"
onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
<p id="demo">
</p>
</body>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</html>
The button shouldn't be inside the script tag. Put it before or after the </script> tag.
Only JavaScript should be in the script tag.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</body>
</html>
So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head
I am trying to make a page with several buttons(or links) that will direct to different pages.
I have tried this by using the following code that should redirect the user to google.com.
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button id="allSetsButton" class="float-left submit-button"> main</button>
</form>
<script type="text/javascript">
document.getElementById("allSetsButton").onclick = function (){
location.href = 'http://google.com';
};
</script>
</body>
</html>
However, when I press the button, the page refreshes instead of redirecting me.
What am I doing wrong here?
Add type="button" to your button element so that it's not considered as a submit button for the form (which causes to submit the form before your event handler can do anything).
<button type="button" id="allSetsButton" class="float-left submit-button"> main</button>
Considering your requeriments, why don't you just use plain links and style them as you need?
<!DOCTYPE HTML>
<html>
<style>
.submit-button {
display: inline-block;
padding: 0.5em 1em;
background-color: #e1ecf4;
}
</style>
<body>
<form id='form' action="main.php">
Main
</form>
</body>
</html>
U can try this
<!DOCTYPE HTML>
<html>
<body>
<form id='form' action="main.php">
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="gotoweb()"> main</button>
</form>
<script type="text/javascript">
function gotoweb(){
window.location.href = 'http://google.com';
};
</script>
</body>
or this in short
<button type="button" id="allSetsButton" class="float-left submit-button" onClick="window.location.href='http://google.com'"> main</button>
I'm newbie to web programming and I can't understand why the following code doesn't work.
It is supposed to remove permanently the content of the div element when the button is pressed, but it disappears for a while and then reappears.
The code is the following:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form onSubmit="prueba()">
<input type="submit" value="Entrar" >
</form>
</body>
</html>
I believe what's happening is that your button is submitting a form, which sends the form to the web server then reloads your page. So:
Your "onSubmit" JS runs immediately and clears the div content.
Your page reloads and the content comes back.
Try something like this instead of a form (i.e. remove the surrounding form tag):
<button onclick="prueba()">Entrar</button>
Try this. You don't need a form to hide a DIV
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<input type="button" onclick="prueba()" value="Entrar">
</body>
</html>
DEMO : http://jsfiddle.net/36pvts4t/2/
try this , for me this is working .This code is remove the text in div with id "uno" , on form submit .
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<script type="text/javascript">
function prueba(){
console.log("Inside the function preueba ");
document.getElementById('uno').innerHTML="";
}
</script>
<div id="uno">CONTENEDOR UNO</div>
<form action="#" method="get" onSubmit="prueba()" target="_blank" >
<input type="submit" value="Entrar" >
</form>
</body>
</html>