Using html, Create a webpage with the following properties:
Create two buttons- turnon and turnoff.
Use on.png and off.png such that
a) If a user clicks on the turnon button, the webpage should display on.png (picture of a lightbulb on).
b) If a user clicks on the turnoff button, the webpage should display off.png (picture of a lightbulb off)
<!DOCTYPE html>
<html>
<head>
<title>Lightbulb</title>
</head>
<body>
<div style="text-align: center">
<input type="button" value="turnon"
onclick= showimage(img src="on.png") >
<input type="button" value="turnoff"
onclick= showimage(img src="off.png")>
</div>
</body>
</html>
function showImage() {
document.getElementById('loadingImage').style.display = 'block';
}
function hideImage() {
document.getElementById('loadingImage').style.display = 'none';
}
<input type="button" value="TURN ON" onclick="showImage();" />
<input type="button" value="TURN OFF" onclick="hideImage();" />
<img id="loadingImage" src="https://i.stack.imgur.com/WQB7V.jpg?s=48&g=1" style="display:none" />
Live Working Example
Actually you need to read, using javascript functions
Javascript functions => https://www.w3schools.com/js/js_functions.asp
Set image source => https://www.w3schools.com/jsref/prop_img_src.asp
Here is a helping link, you could find on google
https://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb
Related
I'm making a website settings page (I guess) where the user of the website can edit the page values that are seen on the public page of a website. (This is restricted to logged-in users only)
I have a form (shown below) that when clicked, executes AJAX and 'posts' the update content page.
I guess my question here is how can I change the code below so it changes which text body to take from based on the button pressed.
Even simpler, How can I make a page-wide click event that applies to all buttons, of which I can tell which button is pressed?
I know there is only 1 text field and 1 button below, but there are going to be more in the future, hence why I need this fuctionality.
My e.js file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/admin.css">
<title>Manage the website</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submitButton").click(function(){
$.ajax({
url: 'update',
type: 'POST',
data: {
toUpdate: 'homepage',
text: document.getElementById('textField').value // Select a text field based on the button
},
});
});
});
</script>
</head>
<header>
<!-- Put partial includes here -->
</header>
<div class="topPage">
<h1>Hello, <%= firstName %>!</h1>
<p1>
Find a value you would like to edit, then press send. The website can take up to 10 mins for the changes to apply. The changes will not change live.
</p1>
</div>
<div class="homepage">
<div class="information">
<h1>
Homepage variables
</h1>
<p1>
Variables for the 'homepage' page are displayed below. Changes can take up to 10 mins to apply globally.
</p1>
<hr>
</div>
<div class="form">
<label>
Change the 'body' of 'homepage'
</label>
<form action="nothing" method="post">
<input type="text" id="textField" name="text" value="<%= pageData.get('homepage').homeBody%>" required>
<button type="button" class="submit" id="submitButton">Submit Changes</button>
</form>
</div>
</div>
<script>
</script>
</html>
Thanks in advance!
You can do it like this:
$("button").on("click", function() {
console.log($(this).attr("id"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="this">
This
</button>
<button id="that">
That
</button>
select the input tags in the form and track the change event:
$("form :input").on("change", function(){
var $elm = $(this); // the button which is clicked
// do your ajax here
});
I want to make a website and my submit button to create a new account is showing and whenever clicked is moving on to the next page.
I want the submit button to show only when the person has already filled in all the information.
<!DOCTYPE html>
<html>
<body>
<input type="submit" id="mySubmit">
<p>Click the "Try it" button to disable the Submit button.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("mySubmit").disabled = true;
}
</script>
</body>
</html>
I am a beginner in html code and created a clickable button however I am stumped how to make it clickable only after the form has been filled out. basic code I have so far is :
<a href="your landing page url">
<img src="your image url" />
</a>
what must I add to achieve what I am looking for?
If you are simply just wanting to use html and vanilla javascript to disable a button form then use the disable property.
<html>
<body>
<input type="text" onkeyup="inputFill(this)" />
<input type="submit" id="submitBtn" disabled />
</body>
<script>
function inputFill(inputData) {
var btn = document.getElementById('submitBtn');
if (inputData.value.length > 0) {
btn.disabled = false;
}
else {
btn.disabled = true;
}
}
</script>
</html>
This should give you a start on what to do
I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.
This is what I have before that div is clicked:
<div>This is the content.</div>
I wan this to become the following when it's clicked:
<input>This is the content.</input>
And to change back when the user clicks elsewhere.
Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.
Any help is appreciated.
Try this
<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>
and controller has function like
function cntrl($scope){
$scope.showInput = false;
$scope.toggleShowInput = function()
{
$scope.showInput = !$scope.showInput;
}
}
If you use Angular, you should write both element and toggle one for the other when the user click :
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
<input ng-show="inputIsOn" type="text">
</body>
</html>
Nope, but the good news is that you don't need that to happen!
In your controller:
$scope.showInput = false;
$scope.myContent = "This is the content";
Back in your HTML file:
<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />
Now when the button is clicked, the input field will display, but the text will not.
I have a page with many section like below.
When I travel from this page to anothe-page-2.html, it is possible when user click back button (from the browser) return and jump to <a name="test 2"></a> ?
try this any of two types...
<html> <head> <script>
function goBack() {
window.history.back() }
</script> </head> <body>
<input type="button" value="Back" onclick="goBack()">
</body> </html>
back