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
Related
I am trying to use PyScript in my HTML projects, since I'm more fluent in it than JavaScript. I need to pull input from an input block, but what should work doesn't seem like it does.
When the user presses the submit button, it's supposed to change the words above it to the value of the input box. However, the code only returns "None", as if the value doesn't exist.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>PyScript Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- /demo.py
</py-env>
</head>
<body style="font-family:Times New Roman;margin-left:40px">
<br>
<p id=main_description class=text>
Hello, world.
</p>
<input class=player_input type=text id=input_box name=input autocomplete=off placeholder="What will you do?">
<button type=button id=submit pys-onclick=submit_input>submit</button>
<py-script src=/demo.py></py-script>
</body>
</html>
PyScript code:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.select(".value")
main_description = Element("main_description")
main_description.write(player_input)
I have searched for a solution to this everywhere, but it looks like PyScript is still relatively new, so I couldn't find anything except traditional Python solutions. Any advice would be greatly appreciated.
On this line player_input = input_box.select(".value") you are trying to access an element with a class of value but no elements exist inside the input. To retrieve the value of the input you need to access it with the value property like so:
# demo.py
def submit_input(e):
input_box = Element("input_box")
player_input = input_box.value
main_description = Element("main_description")
main_description.write(player_input)
I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
I have a HTML code in which the users enter the comment for a particular question if the size of comments are big i want my text box to auto increase in height with the comments
Below is my HTML code:
<label class="label-reports">Comments</label>
<input #((ViewBag.UserId != null && ViewBag.UserId == question.AnsweredBy) || (question.AnsweredBy == null) ? "" : "disabled") type="text" class="form-control" style="align-content:stretch; min-width:1200Px; width: auto !important" for="comments" value="#question.Comments" />
I tried to implement this
<textarea class="form-control" rows="5"></textarea>*
but did not succeed can someone suggest to increase the size of text box with increase in text
For <textarea> Elements...
If you aren't opposed to using a plug-in, you could use something like autosize, which will allow your <textarea> element to grow as expected :
<!-- Example autosize.js CDN Reference -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosize(document.querySelectorAll('textarea'));
</script>
Interactive Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Autosize Example</title>
</head>
<body>
<pre>Start typing (and press Enter a few times)</pre>
<textarea></textarea>
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
autosize(document.querySelectorAll('textarea'));
</script>
</body>
</html>
For <input> elements...
<input> elements don't have to be left out. There is an aptly-named autosize-input plug-in that essentially accomplishes the same basic thing :
<!-- Example autosize.js CDN Reference -->
<script src="https://rawgit.com/yuanqing/autosize-input/master/autosize-input.min.js"></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosizeInput(document.querySelector('#YourInputID'));
</script>
In the below jquery mobile html code, onchange function (onchangeInDropDown();) is called whenever there is a change in multi-select option in drop down. I'm doing some time consuming operation (updating the UI, based on item selected) whenever there is a change. I'm seeing some strange behaviour if I select more than one options quickly (one after another). Could you please suggest me a better way to handle this.
Thought of implementing the following solution, but do not know how to implement it.
Removing the onchange function and put the OK button in the overlay menu. On selecting the OK button, will call a function to get all the item selected and update the UI with respect to the item selected, ie., update all together instead of every change. The problem here is I do not know how to put OK button in the overlay menu. Is there a way to put ok button in overlay menu
Please help me!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Multiselect item </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- below three tags , link and script are for showing pop up toast dialogs -->
<link href="css/toastr.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/toastr.js"></script>
<link href="css/toastr-responsive.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
function onchangeInDropDown (){
//Performing some time consuming operation and updating the ui based on item selected
}
function getDropDownValue() {
var inputElems = document.getElementById("item_drop_select");
count = 0;
for (var i=1; i<inputElems.length; i++) {
if (inputElems[i].selected == true) {
count++;
alert (inputElems[i].value);
// Update the UI based on item inputElems[i].value
}
}
}
</script>
</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >
<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
<option >Multi-select list of item to buy</option>
<option value="milk" id="milk" >Milk</option>
<option value="oil" id="oil" >Oil</option>
<option value="rice" id="rice" >Rice</option>
<option value="softdrinks" id="softdrinks" >Softdrinks</option>
<option value="detergent" id="detergent" >Detergent</option>
</select>
<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>
</div>
</form>
</body>
</html>
Can you please replace this data-native-menu="true". It will open Select menu as native control.
Based on some other code I found from this site (This Question here - Get URL and save it | Chrome Extension)
I was wondering on how to display the URL of a current page in a input box. My coding is below
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('currentLink').innerHTML = tab.url;
});
</script>
</head>
<body>
<div class="links">
<div id="currentLink">Getting Current URL...</div>
<input type="text" id="currentLink" value="Loading...">
</div>
</body>
</html>
(I've cut some features out).
But my question is, how can I get the URL to display in the input box, it displays when I use "div id" but not when I use "input id" any ideas why?
You have to set the value attribute of inputs.
document.getElementById('currentLink').value = tab.url;