I would like to use 'up' and 'down' buttons to scroll through options. Ultimately, the actual dropdown list will be hidden from the user. This example I have left it visible. I can't use onclick in the button tag because this will be a Chrome Extension. The issue is the buttons don't seem to do anything.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('d').addEventListener('click', theme(this));
document.getElementById('u').addEventListener('click', theme(this));
});
var ddl = document.getElementById("s")
function theme(x) {
if (x.value === 'down') {
ddl.selectedIndex = ddl.selectedIndex + 1
} else {
ddl.selectedIndex = ddl.selectedIndex - 1
}
};
<select id="s">
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
<option>Lizard</option>
<option>Snake</option>
</select>
<button id="d" type="button" value="up">up</button>
<button id="u" type="button" value="down">down</button>
<script src="test.js"></script>
There are 2 problems with this bit addEventListener('click', theme(this));. You think it will call theme(this) when you click the button and this will be the button you clicked on. But first, this in this context is window not the button and second, theme(this) is called immediately when addEventListener is executed, and as it doesn't return anything you don't attach any event listeners. Try this instead:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('d').addEventListener('click', () => theme('up'));
document.getElementById('u').addEventListener('click',() => theme('down'));
});
var ddl = document.getElementById("s")
function theme(x) {
if (x === 'down') {
ddl.selectedIndex = ddl.selectedIndex + 1
} else if(ddl.selectedIndex > 0){
ddl.selectedIndex = ddl.selectedIndex - 1
}
};
<select id="s">
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
<option>Lizard</option>
<option>Snake</option>
</select>
<button id="d" type="button" value="up">up</button>
<button id="u" type="button" value="down">down</button>
<script src="test.js"></script>
Related
I implemented a modal with a form inside with 5 buttons: Submit, 2 Close buttons, and 2 more for an input number spinner that allows the user to select a quantity using "+" and "-" buttons. The problem is that every time the "+" or "-" button are clicked, the modal is closed, which is a normal behavior for modals when pressing submit or close buttons but I need the modal to stay visible and allow the user to select the quantity without the modal been closed.
This are the buttons inside the form that control the number spinner:
<div class="item-count">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" id="spin1" data-dir="dwn">-</button>
</span>
<input type="text" class="form-control text-center" name="quantity" value="1">
<span class="input-group-btn">
<button class="btn btn-default" id="spin2" data-dir="up">+</button>
</span>
</div>
</div>
And this is the function that control the input spinner:
<script>
$(document).on('click', '.number-spinner button', function () {
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});
</script>
if I use the e.preventDefault() (associated to ID's for the buttons for this purpose: spin1 and spin2) to avoid the modal to be closed, the modal stays visible but the spinner doesn't not update the quantity input with the new value, and he form sends the default value of 1 to the server to be processed. Any guidance is appreciated. Thanks.
When you tried e.preventDefault(), did you pass the event to the function?
If not check the console, there must be an error saying that 'e' is undefined.
So just pass 'e'(the event), then it should work.
$(document).on('click', '.number-spinner button', function (e) {
e.preventDefault();
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});
I think the best solution will be adding <a href> tag with the button style.
I use an automation testing tool (selenium)
I try to test a page which has this button:
<button morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link">
As a user, when I press show more it shows the "show more content". And when there is no more to show, the morearea-expanded becomes true.
Is there any JavaScript command which could expand the button until the end (until morearea-expanded becomes true)?
Somehting very general I tried as I found it is from the full button list which I found the list and after that the number of button (but this number is not the same in every page I try to test):
document.querySelectorAll('button')
is this:
document.getElementsByTagName('button')[29].click()
You can keep invoking the click event in a while loop until the attribute value is "true". Sample using jQuery (function named automationFunction()):
$(document).ready(function() {
var count = 0,
$button = $("[morearea-controllers='my-list']");
/* bad code alert - just for sample purpose */
$button.click(function() {
if (count == 5) {
return;
} else {
if (count === 4) {
$(this).attr("morearea-expanded", true);
$(this).val("Show Less");
}
$("#container").append((count + 1) + "<br/>");
count++;
}
});
/* automation function */
$("#btn-automate").click(function() {
automationFunction();
});
var automationFunction = function() {
count = 0;
while ($button.attr("morearea-expanded") === "false") {
$button.click();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Five items hidden..click on show more to unhide
<div id="container"></div>
</div>
<input type="button" id="btn-show-more" morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link" value="Show More"> <br/>
<input type="button" id="btn-automate" value="Invoke automation function">
I'm trying to make a website using asp.net mvc 4 & jQuery 1.9.1 where I want to insert boolean values (Y or N) in textbox for the corresponding button pressed. It works for a single button, but it's not working for group of buttons. Here are my codes,
$(document).ready(function () {
var isClicked = 0;
$('.btn').click(function () {
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
});
});
JSFiddle Demo
How can I make the buttons work individually? Need this help badly. Thanks.
uYou can use data- attributes with button to store if its click value is 1 or zero and use that value to update the respective textbox
Live Demo
Html
<button class="btn color-blue" data-clicked="0">ONE</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">TWO</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">THREE</button>
<input type="text" class="assignCheck" />
JQuery
$(document).ready(function () {
$('.btn').click(function () {
var isClicked = $(this).data("clicked");
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
$(this).data("clicked", isClicked);
});
})
Hi im new to javascript and messing about with it.
How can i (if possible) show an output when 2 buttons have been pressed one after the other?
Example: click button 1, click button 2, message shows "button 1 and 2 has been clicked"
use an && operator in an if statement.
Javascript:
var button1 = false;
var button2 = false;
var b1_id = document.getElementById('button1');
var b2_id = document.getElementById('button2');
b1_id.addEventListener('click',click1,false);
function click1() {
alert("Button1 clicked");
button1 = true;
check();
}
b2_id.addEventListener('click',click2,false);
function click2() {
alert("Button2 clicked");
if (button1 !== false) button2 = true; //this is to make sure they are clicked consecutivley
check();
}
function check() {
if (button1 === true && button2 === true) {
alert("Button1 and Button2 clicked consecutively");
}
}
HTML:
<input type='button' id='button1' value='button1' />
<input type='button' id='button2' value='button2' />
jsFiddle
<p id="status"></p>
<button id="btn1" onclick="clickfun(this);">button 1</button>
<button id="btn2" onclick="clickfun(this);">button 2</button>
<script>
clickfun(elm){
var currenthtml = document.getElementById('status').innerHTML;
document.getElementById('status').innerHTML = currenthtml += this.id+' clicked !';
}
</script>
I actually just wrote a library devoted to the mouse object. One thing it does it tracking what buttons are pressed, and follows DOM3 spec mostly.
https://github.com/Benvie/Mouse
Boiled down to minimum, you must continually track the muse to now if the browser does not provide the "buttons" property, which only Firefox 15 does so far. Specially, mousedown to start, then click and contextmenu to end.
The key bits for tracking buttons are
var buttons = 0;
function down(e){ buttons |= 1 << e.button; }
function up(e){ buttons &= ~(1 << e.button); }
window.addEventListener('click', up);
window.addEventListener('contextmenu', up);
window.addEventListener('mousedown', down);
I want to show and hide a button by using java script.
My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.
thanks.....
pls, Check this page and tell if this is what you wanted.
Basically, you need to use onchange event to do whatever you want to do.
<html>
<head>
<script>
window.onload=function(){
document.getElementById("button").style.display='none';
}
function showButton(){
document.getElementById("button").style.display='block';
}
</script>
</head>
<body>
<input type="button" id="button" value="New Button"/>
Change the text in Input Box. Then Button will be show<br/><br/>
<input type="text" id="userText" value="Change the text" onchange="showButton()"/>
</body>
</html>
Try with jQuery:
$("#yourInput").bind("change", function() {
var value = $(this).val();
if (value && value.length > 0) {
// Exist text in your input
$("#yourButton").show();
} else {
$("#yourButton").hide();
}
});
For non-jQuery:
function onchangeInput() {
var value = this.value;
if (value && value.length > 0) {
// Exist text in your input
document.getElementById("yourButton").style.visibility = "visible";
} else {
document.getElementById("yourButton").style.visibility = "hidden";
}
}
window.onload = function() {
document.getElementById("yourButton").style.visibility = "hidden";
var el = document.getElementById("yourInput");
if (el.addEventListener) {
el.addEventListener("change", onchangeInput, false);
} else {
el.attachEvent('onchange', onchangeInput);
}
}
Again, don't show/hide a button, just disable it, that make the best user experience.
You could style the css to visibilty:hidden then in javascript add an event listner like this:
<script type="text/javascript">
var box = document.getElementById('box');
var textbox = document.getElementById('textbox');
textbox.addEventListener("focus",showbox,false);
function showbox() {
box.style.visibility = 'visible';
}
That would make it appear on focus but if you wanted to take it a step further you could add another event listener for a keystroke when the textbox is focused on. That would probably work.
This is to hide/show a div based on text changed in text box.
With JQuery
<script type="text/javascript">
window.onload = function () {
document.getElementById("submitdiv").style.display = 'none';
}
$(function () {
$('.Name').on('keyup change', function () {
if (this.value.length > 0) {
$('#submitdiv').show();
} else {
$('#submitdiv').hide();
}
});
});
</script>
HTML
<%:Html.TextBoxFor(m => m.FirstName, new { #class ="Name"}) %>
<div id="submitdiv">
<button type="submit" value="Submit" class="btn btn-primary pull-right value-set" id="btnLogin">Submit</button>
</div>
Try this:
<script>
function
changeButton() {
document.getElementById("changeButton").innerHTML = "Insert text for button";
document.getElementById("changeButton").removeAttribute("hidden");
}
</script>
<button hidden id="changeButton"></button>