Unable to get div value for voting system - javascript

When I click on #upvote the #vote increases by 1 and when #downvote is clicked it decreases by 1. But when the vote value is "-1" and if the upvote is clicked the vote value becomes "1" and not "0".
<script type="application/javascript">
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').val();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').val();
$('#vote').text(VoteValue1-1);
});
});
</script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>
Any idea to what might be wrong.

Try parseInt()
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = $('#vote').text();
$('#vote').text(parseInt(VoteValue)+1);
});
$('#downvote').click(function() {
var VoteValue1 = $('#vote').text();
$('#vote').text(parseInt(VoteValue1)-1);
});
});
Working DEMO
Note: .text() should use for getting value of DIV instead of val()

First, you should use html() or text() instead of val(), val() is for inputs or textarea.
Then, you should use parseInt, to make sure you manipulate the right types : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
If that doesn't solve it, then create a jsfiddle so that we can reproduce the problem.
Last, beware of duplicate ids if you have multiple voting systems on the same page.

Use .text() instead of .val(), and use + to parse the string into a numeric.
$(document).ready(function (){
$('#upvote').click(function() {
var VoteValue = +$('#vote').text();
$('#vote').text(VoteValue+1);
});
$('#downvote').click(function() {
var VoteValue1 = +$('#vote').text();
$('#vote').text(VoteValue1-1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>

Solution:
Firstly, $('#vote').val() should be $('#vote').text() . Now these values will be of string type. Parse them to int first to work them correct . Because then it would only append the digits rather incrementing or decrementing .
$(document).ready(function () {
$('#upvote').click(function () {
var VoteValue = parseInt($('#vote').text());
$('#vote').text(VoteValue + 1);
});
$('#downvote').click(function () {
var VoteValue1 = parseInt($('#vote').text());
$('#vote').text(VoteValue1 - 1);
});
});

In an HTML document, .html() can be used to get the contents of any element. .val() used for input box. http://api.jquery.com/html/
var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();

Related

div rel click function?

I am getting trouble to make a click function for multiple divs which have same rel value.
JavaScript:
$("[rel=begenici]").click(function () {
var postu = $(this).attr(id);
alert(postu);
});
HTML:
<div rel='begenici' id='2654'></div>
Where am I doing a mistake?
You need to wrap the attribute name in quotes
var postu = $(this).attr('id');
Complete Code:
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
You missed the single quotes
$("[rel='begenici']").click(function () {
var postu = $(this).attr('id');
alert(postu);
});
And not just one the first line (Thanks Tushar :))

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});
It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/
You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});
use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))
it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

How can I take contents of one element and add to another when they both have an id ending in the same two or three digit number?

I have this code:
$('.update-title')
.change(function () {
$(this).prop('title', $('option:selected', this).prop('title'));
});
and this HTML:
<select id="modal_TempRowKey_14" class="update-grid update-title">
...
...
</select>
<input id="modal_Title_14" class="update-grid" type="text" value="xx">
Is it possible for me to make it so that when the .update-title changes
then the value of the title is put into the input id with the matching number.
So in this case the #modal_TempRowKey_14 title would go into #modal_Title_14 value
Important
I want this to happen only if the element being changed starts with modal_TempRowKey. Is this possible to put into the change block?
Try
$('.update-title').on("change", function() {
var id = this.id.replace('modal_TempRowKey_', '');
$("#modal_Title_" + id).val( $(this).val() );
});
My suggestion, rather than trying to parse id attributes, is to make use of jQuery's data function.
Edit your HTML so that the select menu has a data-target attribute:
<select id="modal_TempRowKey_14" data-target="#modal_Title_14" class="update-grid update-title">
...
...
</select>
Then, create your event handler like so:
$('.update-title').on('change',function() {
var $this = $(this);
$($this.data('target')).val($this.val());
})
You use the data-target attribute to find the element to which you want to apply the select menu's value.
Here's a demo:
--- jsFiddle DEMO ---
$('.update-title').change(function () {
var m = this.id.match(/^modal_TempRowKey_(\d+)$/);
if (m) {
$("#modal_Title_" + m[1]).val(this.id);
}
});​
DEMO.
Others have a more elegant approach, here is my attempt:
http://jsfiddle.net/8sLCL/1/
$('.update-title')
.change(function () {
var my_text = $(this).find(":selected").text();
var my_id = $(this).attr("id");
var my_num_pos = my_id.lastIndexOf("_");
var my_num = my_id.substr(my_num_pos + 1 ,my_id.length - my_num_pos );
$( "#modal_Title_" + my_num ).val(my_text );
});​

Javascript replace has no effect

This is the jQuery:
<script type="text/javascript">
$(document).ready(function(){
var relName;
$('.child').each(function() {
relName = $(this).attr('rel');
relName.replace('&','');
$(this).attr('rel', relName);
$(this).appendTo('#' + $(this).attr('rel'));
});
});
</script>
With this relevant HTML:
<div rel="MadDogs&EnglishmenHandpaintedfigurines" id="Figurines" class="category section child">
<h3 class="categoryTitle">Figurines</h3>
</div>
But for some reason, the replace has no effect whatsoever!
replace returns string with replaced data. So you need to assign back to your variable.
relName = relName.replace('&','');
replace() doesn't change the original string, it returns a new one.
It's not updating because you're not assigning the result to anything.
Try this instead:
$(this).attr('rel', relName.replace('&',''));
Here's a neat way to write it, using the callback version of attr basically every jQuery method:
$(document).ready(function() {
$('.child').attr('rel', function(i, relName) {
$(this).appendTo('#' + relName);
return relName.replace('&','');
});
});

using html() to get changed content

I have a div that I need to grab the HTML contents of (so naturally I use html())...
However, they are text fields. Whenever I grab the contents of the div (that contains the text fields), it grabs the initial HTML and not any data changed by the end user...
Here is JS bin version..change the input field, run the function and you see that it will only take the initial value of the field...
Any way around this?
http://jsbin.com/oleni3/edit
http://jsbin.com/oleni3/5/edit
Try this out ^
The code:
$(document).ready(function() {
$('div#top input').change(function() {
$(this).attr('value', $(this).val());
});
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
Your getting the HTML of the div. You want to get the value of the input box:
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
No way to do it with html(). You'll have to get the value of each input using val(). You can use
$("input").each(function() {
doSomething($(this).val());
}
if it make life easier.
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});
The easiest hack would be like this:
$("div#bottom input").val($("div#top input").val());
Get the value of the updated input and set that to the clone.
Updated link:
http://jsbin.com/oleni3/3/edit
$(document).ready(function() {
$('#data').change(function() {
$(this).attr('value', $(this).val());
})
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
This works.. here's the link http://jsbin.com/oleni3/2/edit
UPDATE: If you have many inputs inside the div, you can use this http://jsbin.com/oleni3/6/edit

Categories