I would like to get information when I put buttons, for this I use DOM, but I have errors, how can I solve this problems?
I tried to confirm if name is correct, and search about DOM, but I couldn't figure out it.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="uft-8">
<title>Pomodoro Timer</title>
</head>
<body>
<p class="menu">menu</p>
<p class="timer">0.00</p>
<button data-option='start' class="timer_button" >start</button>
<button data-option='stop' class="timer_button">stop</button>
<button data-option='reset' class="timer_button">reset</button>
<script>
const buttons = document.querySelectorAll('[data-option]');
function test(e){
console.log(e);
}
buttons.forEach(()=>buttons.addEventListener('click',test));
</script>
</body>
I would like to see the results in the console when I put the buttons.
buttons.forEach((button)=>button.addEventListener('click',test))
The buttons is a list. When you iterate over it with forEach you can get each button as the first argument of the method. And that is where you must attach the event handler.
Related
I've been searching for a while, and I found that I can send a value from doGet to html created.
But I want to do smth different, I want to have a button and label where where every time I press on that button it increments the label.
something like a counter for pressing that button.
I already has the HTML that renders button and label it's pretty simple
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('stylesheet'); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDP Test</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function incrementCounter() {}
</script>
</head>
<body>
<label> Counter 0 </label>
<button onClick="incrementCounter"> Increment counter</button>
</body>
</html>
I want to link the incrementCounter function to this label, or whatever html element that can be done that whenever the button is pressed it gets incremented and rendered on the screen
can someone guide me to go through this ?
You have some errors in your code. Firstly it should be onclick not onClick and the function should be called as onclick="incrementCounter()".
Secondly, a label should be used with a input, textarea or select element.
Now coming to the code
HTML
<p>Count: <span id="counter">0<span></p>
<button onclick="incrementCounter()">Increment Counter</button>
JS
function incrementCounter() {
const counterElem = document.querySelector('#counter'),
count = +counterElem.innerHTML;
counterElem.innerHTML = count+1;
}
What is happening inside the code is I'm selecting the target element where the count would display. Then I'm getting the value of its innerHTML and parsing it as an integer using + before the counterElem.innerHTML. Then I'm adding 1 to the value and setting it as the innerHTML
I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
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.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
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