I am a beginner in HTML. How would I make a button that would hide itself when clicked using JavaScript? This is the code I have already, missing a line.
<!DOCTYPE>
<html>
<body>
<button type="button" onclick="delete()" = ;>Hello</button>
<script>
var delete = function(){
//hide button
}
</script>
</body>
</html>
delete is a keyword in js. Use a different name
onclick="deleteThis(this)"
var deleteThis = function(elem){
elem.style.display = 'none';
// elem.style.visibility = 'hidden';
};
First add button 'id'
<button type="button" id='theid' onclick="delete()" = ;>Hello</button>
Then go to the script part
<script>
var delete = function(){
document.getElementById('theid').style.display="none"; // for hide button
}
</script>
See documentation for Style Visibility.
Add an ID to your button like this:
<button id="my_button" type="button" onclick="delete()" = ;>Hello</button>
Then in your JavaScript:
document.getElementById("my_button").style.visibility = "hidden";
Here is your solution:
<!DOCTYPE html>
<html>
<head>
<title>WisdmLabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<button type="button" id="myButton" onclick="hideMe()">Click Me To Hide</button>
<script>
function hideMe(){
$("#myButton").hide();
}
</script>
</body>
</html>
Feel free to ask any doubts or suggestions.
No need to write too much code, I have edited your code , and you can get the effect just like that,,,
<!DOCTYPE>
<html>
<body>
<button type="button" onclick="this.style.display='none'">Hello</button>
</body>
</html>
Related
I have tried many diff ways like using forms or script but i still cannot get it. this are my current codes. Thank you
<button name="nextpg" onclick="redirect()" class="mb-3 signup-btn" >Reset my password</button>
<script type="text/javascript">
function redirect()
{
var url = "http://127.0.0.1:8080/cfmemail.html";
window.location(url);
}
</script>
you can try this. It might do the trick for you
<input type="button" onclick="window.location.href = 'http://127.0.0.1:8080/cfmemail.html';" value="Redirect"/>
Use this code:
<!DOCTYPE html>
<html>
<body>
<button onclick="redirect()">Redirect</button>
<script>
function redirect() {
location.replace("http://127.0.0.1:8080/cfmemail.html")
}
</script>
</body>
</html>
I have made a form and I need to submit the form but whenever I tried to do the same the page reloads and does nothing! I tried both ng-submit <form> attribute and the ng-click as a <button> attribute! I also tried changing the button type from "submit" to "button" then also I get the same result!
Any help would be seriously appreciated!
Thanks!
hope this simple plunker example helps
https://plnkr.co/edit/5q9149KSs7qJH0R32NAS?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App" ng-controller="Ctrl">
<form ng-submit="myFunc()">
<input type="text" ng-model="data">
<input type="submit">
</form>
<p>{{submited}}</p>
<script>
var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
$scope.submited = [];
$scope.myFunc = function () {
$scope.submited.push($scope.data);
}
});
</script>
</body>
</html>
Can anybody help me how to enable a button based on a click event.
I need a scenario, where we have 2 buttons, Button1 and Button2(disabled by default).
Upon clicking on Button1, say after 10 seconds my Button2 should be enabled.
Where i am doing wrong in the below code? My Button2 is not enabled after i click on Button1. Can anybody help me.
Thanks in advance,
Uday
<html>
<Head>
<Title>Synchronization</Title>
</head>
<script>
function PleaseWait()
{
document.getElementsByName("SampleButton2").disabled=false;
}
</script>
<body>
<input type="button" name="SampleButton1" value="Button1" onclick="PleaseWait()">
<input type="button" name="SampleButton2" value="Button2" disabled>
</body>
</html>
You can do it with jQuery.
Inside $(document).ready() method, define a function PleaseWait(), where you can write the code to remove disabled attribute form your button.
Then when any user clicks on button1, trigger a function to call pleaseWait() function after a delay using setTimeout() method. I used 5 milliseconds for delay. You can increase or decrease it.
<!DOCTYPE html>
<html>
<head>
<title>DOM Level 0 Events Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input type="button" name="SampleButton1" value="Button1">
<input type="button" name="SampleButton2" value="Button2" disabled>
<script type="text/javascript">
$(document).ready(function(e){
function PleaseWait(){
$('input[value="Button2"]').removeAttr('disabled');
}
$('input[value="Button1"]').click(function(e) {
setTimeout(PleaseWait, 5000);
});
});
</script>
</body>
</html>
try this
document.getElementsByName("SampleButton2").removeAttr('disabled');
or you can use
$('SampleButton2').prop('disabled', false);
I'm new to web development and I'm trying to understand how the DOM works.
I have a basic page with 2 buttons and some text. One of the buttons does a call to Jquery's Get function. My server returns some html with some script as well. Which is then added to my DIV on my main page which has an ID of 'content'
See below for the code.
Main Page
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
Code Returned
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
The Updated DOM - notice that my new javascript aren't seen.
<!DOCTYPE html>
<link rel="stylesheet" href="css/toastr.css">
<html>
<body>
<h1>My Main Page </h1>
<button class="alertmsg">click me</button>
<button class="addDom" >Call Add HTML</button>
<div id="content">
<div>
<h1>Added Via $.html</h1>
<button class="showmsg">click me for jquery</button>
</div>
</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="js/toastr.js"></script>
<script>
$(document).ready(function(){
$(".alertmsg").click(function() {
alert("Hello World!");
});
$(".addDom").click(function(){
$.get( '/adddom',
function (data) {
// put html into the section
$("div#content").html(data);
})
});
});
</script>
What I'm trying to understand is;
1) Where does my new script code exist?
<script>
$(document).ready(function(){
$(".showmsg").click(function(){
toastr.warning( "Test Warning", 'Warning');
});
});
</script>
is it in memory only and not in the DOM?
2) I can get the warning to show correctly i.e $(".showmsg").click
fires and shows what is expected. So my my script can reference the existing libraries in the DOM which are needed. How does this work?
3) What is the best way to trouble shoot this code if I cannot see it in my browser?
Many thanks!
If you really want to append the script to the dom you need to use appendChild() not .html(). link about appendChild
An example of doing this would be
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.text = 'alert("test");';
$('div')[0].appendChild(script);
Here is a fiddle showing this.
you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.