I have a normal div, and I wanted to know if it can actually hold a numerical value. Take cookie clicker for instance, the number of cookies you have is shown in a div, how do I do that with my div?
<div id="myDiv">0</div>
Or
<div id="myDiv" value="0"></div>
I tried the second option, and it doesn't show my value doesn't show. I tried the first option, but what I want to do with it, it doesn't really work, because I can't edit the value with my javascript functions.
How would I do this, so that the div can hold my value and my value can be edited?
Your question isn't clear for me but is this what you want?:
you can use JavaScript to get the value of that div.
HTML
<div id="myDiv">0</div>
JavaScript
var text = $('#myDiv').text();
var text has the value of 0 now. you can do with it what you want.
You can do with the second option like the following:
SETTING THE VALUE
document.getElementById('myDiv').setAttribute('value',50)
GETTING THE VALUE
console.log(document.getElementById('myDiv').getAttribute('value'));
SUGGESTION:
Try data-value instead of value, because value is not a valid attribute of div.
Values are for form input elements.
To modify content of other elements search Javascript DOM for more.
For example:
You can edit the innerHTML property with Javascript.
https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML
You'll have to convert the value because the value you're trying to pull will technically be a string.
var SomeVar = $('#MyDiv').html();
var SomeAnswer = 8 + parseInt(SomeVar);
Related
I am trying to move text from inside a div into the value from an input field but I'm getting [object Object] as the output. Can anyone explain why?
input = $('#input').contents();
$('#output').val(input);
Spencer.
The .contents() method won't give you the text, but an object with a collection of the elements it contains. You sould use:
val method:
The .val() method is primarily used to get the values of form elements
such as input, select and textarea.
text method:
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method.
The line you're looking for is:
$('#input').val($('#div').text());
and can be decomposed like this:
var textToMove = $('#div').text();
$('#input').val(textToMove);
Here is a full example:
function move(){
$('#input').val($('#div').text()); //copy text
$('#div').text(''); //erase text
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='input' type='text' value=''>
<div id="div">Hello, Spencer</div>
<button onclick='move()'>Click to move text</button>
First get the text content with
$("#d").text()
Add this to input like
$("#y").val($("#d").text());
Now you can remove text of div like
$("#d").text("")
$("#y").val($("#d").text());
$("#d").text("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="d">text</div>
<input type="text" id="y"/>
Note:
Given a jQuery object that represents a set of DOM elements, the .contents() method allows to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. and the results includes text nodes and comment nodes as well as HTML elements in the resulting jQuery object. Here
That's why you are getting object. you really need to use .text() here to get the text contents only.
The contents() you were trying to use is defined by the jQuery documentation as
To get the children of each element in the set of matched elements,
including text and comment nodes
So, contents() is returning en entire object with all those children, comments and etc... that's why: [Object Object]. If you use console.log($('#input').contents()) you will be able to see the entire object in the console.
So, in that case, it's better to use text(), that get only the text content of the element matched.
After getting the text, then set it to the input with val();
the example below shows this. (I added a timer just to better represent the code working, you can remove it and let only the code that is inside).
Also, if you want to keep the text in the div, remove the part where I used .text('');
setTimeout(function(){
input = $('#input').text();
$('#output').val(input);
$('#input').text('');
}, 1500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='' id="output">
<div id="input">Abcdef 1234567890</div>
I need to replace each word in the textarea by a span with unique id. I need the code in JavaScript. I have tried creating a DOM element and inserting it in text area using the following code.
var s = document.createElement('span');
var text=document.createTextNode("inside tag");
s.appendChild(text);
document.getElementById("t1").appendChild(s);
t1 is the is the id of my text area. The above code isn't giving any result.
Also, I tried another method:
document.getElementById("t1").innerHTML="<span>inside tag</span>";
innerHTML isn't working here.
What do I do?
It has to be the value property instead of the innerHtml because of the fact that value property is used for setting the value for input/form elements. innerHTML on the other hand is normally used for div, span, td and similar elements.
So as you are using a textarea you shall go with value property.
document.getElementById("t1").value = "Whatever the text/html you want to insert here";
To change your value of text arena, you will have to do this:
document.getElementById('t1').value = '<span>inside tag</span>';
I used the following code to insert new rows.
function NewInputText(_id,_width,_readOnly,_value)
{
return "<input id='"+_id+"' readonly="+_readOnly+" type='text' value='"+_value+"'/>";
}
How can I get this inputText's values from any cell?
Important: I don't need the innerHTML string, I just want the value from inputText in any of the table cells.
You may need:
var val = document.getElementById('inputId').value;
after your <input> is populated.
Assuming this element was already added to your HTML, your get the value of an element via the value property. You could also just use _value again, but I don't know your full code.
And you should consider using CSS to design your input-boxes. You might also want to use textContent instead of innerHTML if you're not inserting any HTML elements.
You have something like below, to get the exact value and not innerHTML:
function getValue(_id) {
return document.getElementById(_id).value;
}
Hi I am trying to get the HTML of INPUT tag. But unable to..
<input type="checkbox" name="_QS4_CNA" id="_Q0_C7" class="mrMultiple" value="NA">
<label for="_Q0_C7">
<span class="mrMultipleText" style="">None of these</span>
</label>
</input>
And I am trying access as
var dat=$(':checkbox#_Q0_C7').html();
alert(dat);
But i cannot access this. Please help me on this..
The ".html()" method gets the contents of an element, and not the element itself. In your case, the problem is that your HTML is invalid. An <input> tag cannot have content. As far as the browser is concerned, the tag ends where the <label> tag starts, and the browser just ignores the closing tag.
Note that when you've got an "id" attribute to use to find an element, you don't need any other qualifiers in the selector (like ":checkbox"). Just "#_Q0_C7" is all you need, because "id" values have to be unique anyway.
edit — Note that if all you want is to get some attribute (like the value or the "checked" status) from the element, you can certainly do that:
var $cb = $('#_Q0_C7');
var isChecked = !!$cb.prop('checked'); // force a real boolean value
var value = $cb.val();
You can try accessing the RAW underlying DOM element and use its innerHTML property.
var dat = $(":checkbox#_Q0_C7")[0].innerHTML;
But like mentioned by Pointy, that might still get you nothing. Not sure what (if any) input elements have actual siblings.
i wanted to get the value of a hidden div in jquery i.e.
<div id="text">hello i am the value, you want</div>
and i want insert this value into a another div in jquery i.e.
$('#bio').html($value);
EDIT:
i forgot to mention that it had to be the text within the block div sorry i.e. its parent
<div class="block" id="status_13">
<div id="text">.......</div>
</div>
i.e.
$('.block').click(function(){
$('#bio').html($('$text').html());
If your #text element contains HTML you might want to do:
$('#bio').html($('#text').html());
If you are only concerned with the literal text of #text then you can do:
$('#bio').text($('#text').text());
Of course, if you want to store the text in a variable first, you can do so:
var textValue = $('#text').text();
$('#bio').text(textValue);
In regard to your later edit:
$('.block').bind('click', function() {
var thisTextValue = $(this).children('.text').first().html();
$('#bio').html(thisTextValue);
});
Notice that I assumed the child div is marked with a class and not an id. Based on your description, it sounds like you have multiple "block" elements which each contain a "text" element. If that is the case, then $('#text') will always return the first "text" element in the document; IDs are unique in the document.
Don't use $ for variables (like $value), just value
var value = $('#text').html();
Did you try
$('#bio').html($('#text').html());
I think this would work
//get the value from hidden field and store it in the variable 'valueYouWant'
var valueYouWant = $("#text").html();
//set it in other field
$("#bio").html(valueYouWant);
edit:
More information can be found here