I want to alert the value of the textbox topValue, but when solve () is called, a textbox does appear, but with no text / value / number
Here is my code:
var topValue = document.getElementById('topValue').value
function solve() {
alert(topValue);
}
$('#solveButton').click(function () {
solve();
});
The value of the textbox is first fetched from DOM. But, when clicked on button, the same cached value is used.
This can be solved by moving the statement that read value from DOM in the function.
function solve() {
var topValue = document.getElementById('topValue').value
alert(topValue);
}
Note that
$('#solveButton').click(function () {
solve();
});
can also be written as
$('#solveButton').click(solve);
But, there is a better way.
I'll suggest you to use jQuery to get the value from the textbox.
// When DOM is completely loaded
$(document).ready(function () {
// On click of the `solveButton`
$('#solveButton').click(function () {
// Get the value of the `#topValue`
var topValue = $('#topValue').val();
// For debugging use `console.log` instead of `alert`
console.log('topValue', topValue)
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var topValue = document.getElementById('topValue').value; // have the initial value
function solve() {
alert(topValue);
alert(document.getElementById('topValue').value) // current value
}
$('#solveButton').click(function () {
solve();
});
});
</script>
</head>
<body style="width:50%;">
<input type="text" id="topValue" value="ssss"/>
<input type="button" value="Solve" id="solveButton" />
</body>
</html>
Related
I have problem where I have to click twice to swap button text and class on the first time I click it. All the other times it changes on first click.
I already tried removing click inside changeUnits() function but in this case I can change to Celcius once and cannot swap values anymore. I'm assigning value and class because I'm going to use it later in another api call to retrieve weather in specified units.
Does anyone see what am I doing wrong?
html
<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button>
javascript
function changeUnits() {
if($("#units").hasClass("Fahrenheit")) {
$(".Fahrenheit").click(function() {
$(".Fahrenheit").text("C");
$(this).removeClass('Fahrenheit').addClass('Celcius');
});
}
else if($("#units").hasClass("Celcius")) {
$(".Celcius").click(function() {
$(".Celcius").text("F");
$(this).removeClass('Celcius').addClass('Fahrenheit');
});
}
}
try this .. No need to check for class you only need toggleClass() and just check for .text() to change the text to C or F
function changeUnits(el) { // pass el here
var ThisText = $(el).text(), // get text from this element
fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C'; // set fah_or_ce as a variable and check if C return F and if else return C
$(el).text(fah_or_ce ); // change text with new text
$(el).toggleClass('Fahrenheit Celcius'); // toggle between classes
}
and use it onclick = "changeUnits(this)"
Demo 1
function changeUnits(el) {
var ThisText = $(el).text(),
fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C';
$(el).text(fah_or_ce );
$(el).toggleClass('Fahrenheit Celcius');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="units" class="Fahrenheit" onclick="changeUnits(this)">F</button>
And for me I prefer to use .on(click) event instead of inline onclick
Demo 2
$(document).ready(function(){
$('#units').on('click' , function(){
changeUnits(this);
// you can use callWeather() as well
//callWeather();
});
});
function changeUnits(el) {
var ThisText = $(el).text(),
fah_or_ce = $(el).text().trim() == 'C' ? 'F' : 'C';
$(el).text(fah_or_ce );
$(el).toggleClass('Fahrenheit Celcius');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="units" class="Fahrenheit">F</button>
I don't understand what why you use the function changeUnits only when button is click. For me it should be more when $("#units") change class. But it will be better to use this code for you :
<button id="units" class="Fahrenheit" onclick="changeUnits();callWeather()">F</button>
<button id="units" class="Celsius" onclick="changeUnits();callWeather()" style="display: none;">C</button>
function changeUnits() {
if($("#units").hasClass("Fahrenheit")) {
$(".Fahrenheit").hide();
$(".Celcius").show();
}else if($("#units").hasClass("Celcius")) {
$(".Fahrenheit").show();
$(".Celcius").hide();
}
}
There you go :
Explanation:
Your problem is quite simple, the fact that you have to press twice is due to the fact that your function that really does the swap is affected once you click,
a simple idea is to assign your function when the document loads
Working code, that is really similar to yours:
function initialize()
{
if($("#units").hasClass("Fahrenheit"))
{
$(".Fahrenheit").click(function()
{
$(".Fahrenheit").text("C");
$(this).removeClass("Fahrenheit").addClass("Celcius");
$(this).click(initialize());
});
}
else if($("#units").hasClass("Celcius"))
{
$(".Celcius").click(function()
{
$(".Celcius").text("F");
$(this).removeClass("Celcius").addClass("Fahrenheit");
$(this).click(initialize());
});
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body onload="initialize()">
<button id="units" class="Fahrenheit">F</button>
</body>
</html>
I have a javascript function that updates the result of a textbox dynamically, then that textbox executes based on that value.
<script>
function updatemykad(mykad) {
$('#asd3').val(mykad);
}
</script>
The textbox loads on, on change, on paste. But it doesn't execute from the dynamically inputted value.
$('input#asd3').bind('input propertychange', function(e) {
console.log(this.value);
var $q = $(this);
if($q.val.length == 12){
....
You have to trigger change function when change value.
<script>
function updatemykad(mykad) {
$('#asd3').val(mykad);
$('input#asd3').trigger("change");
}
</script>
Goal: User focuses input field. User writes a value in input field. When user is done and the input field isn't in focus anymore, save inserted value to a variable called 'inputFieldValue'. This is should be done invoking the function 'returnInputValue'.
html
<!DOCTYPE html>
<html>
<head>
<title>My test</title>
</head>
<body>
<input class="input" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.js
function returnInputValue() {
var inputValue;
$('.input').blur(function() {
inputValue = $('.input').val();
});
return inputValue;
}
var inputFieldValue = returnInputValue();
When I call the variable inputFieldValue variable from the console after having inserted a value and focused out again, it is still 'undefined'.
Have I missed something?
The function you execute is an asynchronous function, i.e., it is based on the time after the input triggers a blur event. You need to either return it inside the blur event:
function returnInputValue() {
var inputValue;
$('.input').blur(function() {
inputValue = $('.input').val();
return inputValue;
});
}
As suggested by some, even above code is not correct. The inputValue doesn't work as it always returns undefined.
Or, set it up to directly access the last blurred value.
var inputValue = "Not Blurred Yet!";
$('.input').blur(function() {
inputValue = $('.input').val();
});
function returnInputValue() {
return inputValue;
}
This is the current logic:
Initialize a variable that has an undefined value.
Bind a handler which is executed at undefined junctures, the variable is still undefined.
Return the undefined value immediately
The above logic is broken and should be rectified. The best option is moving the final logic into the blur handler:
$('.input').blur(function() {
var inputValue = this.value;
// do something with the value
// ...
});
If you need to get the value at a certain juncture, query the DOM, select the element and get it's value.
Try to declare variable outside the function
<script>
var inputValue;
function returnInputValue() {
$('.input').blur(function() {
inputValue = $('.input').val();
});
return inputValue;
}
var inputFieldValue = returnInputValue();
</script>
You could use.
$(document).on("blur","#Yourinput",function(){
var Myval = $("#Yourinput").val();
// Execute your code here I.e call your function
// ...
// You do not even have to call you function put
// It in a div to display
$("#yourdiv").html(Myval);
//Will display it in a div
//Or add to array
Yourarray.push(Myval);
});
This uses jQuery .on() method.
This method is very flexible. If your inserting into a database you can do that here too quite simply with jquery ajax.
You have to play with the events I.e replace blur with another event but if your using jquery this I believe is the simplest method
i have one textfield whose id is date. i want to give an dialog boxmsg when textfield is empty. i am tried the following code a lot times but it never going to execute button click function. Why this happen please tell me
var val = $('#date').val();
$(document).ready(function() {
$("#btnSubmit").click(function() {
if (val != null) {
$("#dialog").dialog();
return false;
}
});
});
Move var val = $('#date').val(); inside click handler so that val will always contain the latest value in the #date input.
$(document).ready(function() {
$("#btnSubmit").click(function() {
var val = $('#date').val().trim(); // Remove leading and trailing spaces
// Moved inside click handler
if (!val) { // Check if falsy value
$("#dialog").dialog();
return false;
}
});
});
Looks like your val variable scope is different. So you can try something like:
$(document).ready(function () {
$("#btnSubmit").click(function(){
if ($('#date').val()){
$("#dialog").dialog();
return false;
}
});
});
Something like this? Gets the value when you click and alerts if it's empty?
You need to get the textbox's value when you click, otherwise it will be empty since it's going to be set ONCE, when the page loads.
$(document).ready(function () {
$("#btnSubmit").click(function(){
var textbox = $('#textbox').val();
if (textbox.length == 0){
alert();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="textbox" type="text" placeholder="Type here"><br>
<button id="btnSubmit">Click me</button>
I have input field:
<input class="form-control" id="Page" min="1" name="Page" type="number" value="1">
and with jQuery I'm trying to change value after button press.
Here is my code:
$(document).ready(function () {
$("#Right").on("click", function () {
var page = $("#Page").val();
page = page++;
$("#Page").val(page);
})
I can read value.
increment it.
But when I'm trying to save it to he input field value it's keeps old value.
I also tried parsing it to int like this:
var value= parseInt(page);
value = value++;
$("#Page").val(value);
And this also gave no effect.
Can you suggest something?
Simply use page++;
$(document).ready(function () {
$("#Right").on("click", function () {
var page = parseInt($("#Page").val());
page++;
$("#Page").val(page);
});
});
Fiddle Demo
value++ is known as postfix , add 1 to a returns the old value.Hence while using value = value++; , the value of value will be always 1
The problem is that value = value++ won't sum, instead use just value++.
var value = parseInt(page);
value++;
$("#Page").val(value);
Use parseInt() to convert the value as integer, then apply increment. Try with this
$(document).ready(function () {
$("#Right").on("click", function () {
var page = parseInt( $("#Page").val() );
page++;
$("#Page").val(page);
})