I have a HTML page, source code is given below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.getElementsByTagName('button').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
My basic purpose is, when I click on button having id "btn3", it should display number of buttons in my HTML page (in this case 3). But somehow it is always showing 0.
Thanks for your quick reply. As all of you suggested, I have modified my code as shown below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
But now I am getting below error -
Message: Object doesn't support this property or method
Line: 4
Char: 9
Code: 0
URI: file:///C:/Documents%20and%20Settings/556996/Desktop/demohtml.html
I am testing in IE8. Please help!
Thanks,
Kartic
Try using either of
document.getElementsByTagName('input')
or the more specific
document.querySelectorAll('[type=button'])
The problem you're facing is that you don't have any elements with the tag name button. All of your buttons have the tag name input.
If you aren't supporting IE7, you could use querySelectorAll to get those elements:
document.querySelectorAll('input[type=button]')
Or you could change your HTML to use <button> elements:
<button type="button" value="button 1" id="btn1" name="btn1">button 1</button>
Use this...
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
Or this for old browsers
function jsMeth() {
var elem = document.getElementsByTagName('input');
var numBts = 0;
for(i = 0; i < elem.length; i++){
if(elem[i].getAttribute('type') === 'button'){
numBts+=1;
}
}
alert(numBts);
}
DEMO
Related
I'm making a website to edit a special image faster, and I want to change the text from the <text> thing when clicking the button insert from the input type "creatorcode".
input type creatorcode and insert
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction"();>Insert</button>
script
<script type="text/javascript">
function myFunction() {
document.getElementByTagName("text").innerHTML=document.getElementByTagName("text");
}
</script>
text
<b><text>creator-code</text></b>
anyone?
There are few mistakes in code which were fixed in below code snippet. Try this I hope it'll help you out. Thanks
Mistake 1 - Change input type="creatorcode" to input type="text" there is no creatorcode input type in HTML.
Mistake 2 - Change onclick="myFunction" to onclick="myFunction()" you need to add () after your method name.
function myFunction() {
var code = document.getElementById('entercolor').value;
document.getElementById("newCode").textContent = code;
}
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction()">Insert</button>
<b><text id="newCode">creator-code</text></b>
Link for jsfiddle:
<input type="text" id="entercolor" placeholder="Creator Code" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" name="insert_button">Insert</button>
<div>
Some text here...
</div>
</div>
document.getElementsByName("insert_button")[0].onclick = function(){
document.getElementsByTagName("div")[0].innerHTML = document.getElementById("entercolor").value
}
https://jsfiddle.net/6drvcbz0/
Hope that helps.
I have the following html 5 slider and button
<button type="button" class="btn btn-default zhaw-ict-icon zhaw-icon-hinzufugen zoom-in" (click)="zoomIn()"></button>
<input class="btn zoom" type="range" min="1" max="300" [value]="currentZoomValue"
(change)="zoomWithRangeInput($event)"
(input)="zoomWithRangeInput($event)"
Here is the typescript
zoomIn(): void {
this.currentZoomValue = 20;
this.changeDetector.detectChanges();
}
If I manually drag the slider everything works as expected.
If I click the button and update currentZoomValue in the method zoomIn the method zoomWithRangeInputis never called because neither the input nor the change event get called. But currentZoomValue has the correct value of 20 and the slider has moved to reflect 20.
Any idea what might cause that or is that expected behavior?
One solution to your problem is :
<button type="button" class="btn btn-default zhaw-ict-icon zhaw-icon-hinzufugen zoom-in" (click)="zoomIn()"></button>
<input class="btn zoom" type="range" min="1" max="300" [value]="currentZoomValue"
(change)="zoomWithRangeInput($event.target.value)"
(input)="zoomWithRangeInput($event.target.value)"
In type script :
zoomIn(): void {
this.currentZoomValue = 20;
this.zoomWithRangeInput(this.currentZoomValue);
}
....
zoomWithRangeInput(value)
{
...
}
Try changing the model value instead. Use ngModelChange and set value also in ngModel:
<input class="btn zoom" type="range" min="1" max="300" [value]="currentZoomValue"
(ngModelChange)="zoomWithRangeInput($event)" [(ngModel)]="currentZoomValue" />
Code below creates two buttons with different size in html form. How to make these buttons same size?
<form>
<input type="button" value="btn"">
<input type="button" value="superLongButon"">
</form>
How wide a button appears on a page is controlled using CSS.
There are at least 3 ways to achieve what you are trying to do.
1. Inline CSS:
<form>
<input type="button" style="width:200px;" value="btn"">
<input type="button" style="width:200px;" value="superLongButon"">
</form>
2. Adding an HTML class and creating a CSS rule for that class:
<form>
<input type="button" class="frmBtn" value="btn"">
<input type="button" class="frmBtn" value="superLongButon"">
</form>
Then you add this in your CSS file:
.frmBtn {
width:200px
}
3. CSS only (no need to edit your html):
form input[type='button'] {
display:inline-block;
width:200px; //or as wide as you want them to be
}
Number 1 should generally be avoided where possible as you lose the consistency and performance benefits of using an external style sheet.
Create a style class and use it in both button.
.clsButton {
//Put your style declaration here
}
<form>
<input type="button" value="btn" class="clsButton">
<input type="button" value="superLongButon" class="clsButton">
</form>
You could use the CSS flexbox to achieve this behavior.
Check the following example:
form {
display: flex;
}
input,
button {
flex: 1;
}
<form>
<button>small button</button>
<button>this is the bigger button</button>
</form>
<form>
<input type="button" value="small button">
<input type="button" value="this is the bigger button">
</form>
I had a similar task. I'd suggest in that case to count letters of text for each button, multiply the size to a certain width, and use the maximal value as an inline value for the width.
Example:
const buttonOne = "save" // 4
const buttonTwo = "save with notification" // 22
const maxLength = Math.max(buttonOne.length, buttonTwo.length)
const letterWidth = 5 // play with this value
const additionalWidth = 3; // play with it to find the value that suits your needs
const maxWidth = maxLength * letterWidth + additionalWidth;
// React
// I use 'ch' here, because 'ch' is width of 0 (in css)
<button style={{width: "${maxWidth}ch"}}>{{buttonOne}}</button>
<button style={{width: "${maxWidth}ch"}}>{{buttonTwo}}</button>
I am making a program that requires the user to input a string into an HTML text input box but it has to be four characters. Is there any way to set a max value for the input? Also can you make it so it can only be numbers? Here is what I mean:
<html>
<head>
</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<input type=text id=pin_number **maxvalue=4**>
/*Maybe you can do it with buttons*/
<table><tr><td><input type="button" value="1>"</td><td><input type="button" value="2>"</td>
<td><input type="button" value="3>"</td></tr><tr><td><input type="button" value="4>"</td><td><input type="button" value="5>"</td>
<td><input type="button" value="6>"</td></tr><tr><td><input type="button" value="7>"</td><td><input type="button" value="8>"</td>
<td><input type="button" value="9>"</td></tr></table>
</body>
</html>
<input type="number" max="9999" min="0" required value="0">
Fiddle.
Another solution, using the HTML5 pattern attribute:
<input type='text' pattern='\d\d\d\d' />
Fiddle
Again, I'm supposing you want exactly four digits. And you can type anything you want in, but an error is thrown when you click submit
Use Javascript and regular expressions like this:
<html>
<head>
<script language="javascript" type="text/javascript">
function pinnotify() {
var notify = document.getElementById('notify');
var numberRegex = new RegExp("^[0-9]+$");
var text = document.getElementById("pin");
if(numberRegex.test(text.value)){
notify.innerHTML = '<a style="font-size:1em;">Looks good!</a>';
}else{
notify.innerHTML = '<a style="font-size:1em;">Please numbers only.</a>';
}
if(text.value.length > 4){
text.value = text.value.substring(0,4);
}
}
</script>
</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<form method="post" action="">
<input type="text" name="pin" id="pin" size="32" onkeyup="return pinnotify();"> <span id="notify"></span><br/>
</form>
</body>
</html>
Here is my way to filter digits and check max value in a text field.
It works in any browser
JS function:
function InputReplaceForInt(input, max) {
if(max > 0 && input.value.length > max) {
input.value = input.value.substr(0,max);
}
input.value = input.value.replace(/[^\d]/g, '');
}
Html code:
<input name="telephone" type="text" onkeyup="InputReplaceForInt(this,11)"/>
I need help with my HTML styling.
here is the HTML code:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = '';" size="25"/>
As you can see, all the elements that are inside <div></div> will be displayed upon clicking button1 (they are hidden initially).
What I want is that when button1 is clicked in addition to all the other fields (including button2) being displayed, button1 to be hidden.
How can I do this?
Change
onclick="document.getElementById('hidden').style.display = '';"
to
onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'"
You can see this in action here: http://jsfiddle.net/nayish/sJ5RR/.
instead of '' change it to 'Block'
so:
<input type="button" id="button1" value ="Get Info"
onclick="document.getElementById('hidden').style.display = 'Block';" size="25"/>
But the best way will be to externalize your script so you can do more stuff without cluttering your html
var btn = document.getElementById('button1');
btn.onclick = function () {
// all the stuff you want to do
document.getElementById('hidden').style.display = "block";
this.style.display = "none";
... more stuff ...
}