This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
Related
Is it possible to assign HTML text within an element to a JavaScript variable? After much Googling, I note that you can assign HTML elements to a variable, but I want the actual text itself.
Details about my goal:
I am currently working on a CRUD application, and with the click of a delete button, a modal will display and ask the user for confirmation before deleting the record. Once the button has been clicked, I want to retrieve HTML text within a specific element used for AJAX call data. However, what I have tried so far is not being logged to the console; even when I change the global variable to var deleteLocationID = "test"; I doubt the modal displaying will affect the click function?
The code:
var deleteLocationID;
$("#deleteLocationBtn").click(function () {
deleteLocationID = $(document).find(".locationID").val();
console.log(deleteLocationID);
});
What I have tried so far:
Changing "deleteLocationID = $(document).find(".locationID").val();" to the following variations:
deleteLocationID = $(document).find(".locationID").html();
deleteLocationID = $(".locationID").val() / deleteLocationID = $(".locationID").html();
deleteLocationID = document.getElementsByClassName("locationID").value;
Any help would be much appreciated.
Use the text() method from JQuery, with this you can get the text inside of your element.
Use this way, it may help you:
deleteLocationID = $(document).find(".locationID").text()
Here is example of getting text from class element:
$('.locationID').text()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="locationID">45</div>
It depends on the type of element you are trying to find your value.
for input types you can find the value by .val() in jQuery like:
$(document).find(".locationID").val();
you can grab innerHTML of the element by .html() in jQuery like:
$(".locationID").html();
but if you want to grab innerText of an element you can use .text() in jQuery like:
$(".locationID").text();
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 4 years ago.
How can I input data in HTML using for example <input> and then interpretet it? What I mean is, I want to input age for exaplme and treat it as variable in order to built the function of age in the script later.
You just need to get the <input> value with javascript.
For example:
<input type="text" id="age" />
And in javascript:
var x = document.getElementById("age");
var age = x.value;
Now you can treat the age as a variable
If you don't want to use jQuery then you can use JavaScript's getElementById function. An example:
HTML:
<input id="someInputField" type="text" name="someInput">
JavaScript:
var inputValue = document.getElementById("someInputField").value;
You can also get the value by name using the getElementByName method.
See the docs for more:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
First, you would need to select it from the DOM.
const inputField = document.querySelector('#my-input');
then you can view the current value in it with inputField.value
as far as I understand, your concern is using the HTML elements such as labels and spans for user input. while you can always style form elements to look the way you want, but to achieve this you can use HTML's contenteditable attribute:
<span contenteditable="true" id="input">This is an editable paragraph.</span>
on the JavaScript end, you can use jquery to easily detect the onChange events and call a function to act upon:
$('#input').on('change', function(){
alert($(this).val() );
// or any other operation you'd want to perform
});
This question already has answers here:
How to get value of a div using javascript
(7 answers)
Closed 3 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
I had this problem when I get the value from a div:
function sync(){
var n1 = document.getElementById('editor').value;
alert(n1);
var n2 = document.getElementById('news');
n2.value = n1;
}
div with id editor looks like this:
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
When I put something in that div it will alert me undefined and that will also come in the textarea i paste it in too. So the problem is obviously by this:
var n1 = document.getElementById('editor').value;
What am I doing wrong?
Try this
var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent
I think it's important to note that even if <div> was a HTMLInputElement you would still keep getting undefined because your div,
<div class='message' id='editor' contenteditable="true" onkeyUp='sync()' style="color: black"></div>
Has no value attribute, here is an example of a div with a value attribute:
<div class='message' id='editor' value='hello'></div>
However, as mentioned in other answers, even though you have entered a value it, .value will still return undefined because <div> is a HTML element and not a HTMLInputElement.
If you really need to store some information in the value of the div you can always do something like this:
<div id="mydiv"></div>
<script>document.getElementById('mydiv').value='hello';</script>
Right after the div loads, you force 'hello' as the value.
The only reason you'd do this is if you really want to store data within the div's value and can't store it within the innerHTML because the div is visible.
If you want to store the information within your div like this:
<div id="editor">all the information i want to store</div>
Then document.getElementById('editor').innerHTML; is the correct solution, but remember that users will be able to see the information on the webpage.
HTML Elements and HTMLInputElements are different things.
The value attribute is present in HTMLInputElement in HTMLInputElement Reference
div elements are HTMLElement
If you change your div to input your Javascript will work fine.
The option is to use innerHTML as said in another answer but be aware that this could be HTML fragment at times if you don't control the HTML or over time forget the Javascript and can lead to defects as things.
FYI plain elements attribute reference(there is no value)
Looked up several "Answers" to this problem, but it was mostly just people not treating the result returned by getElementsByName() as a NodeList!
Edit: I am trying to hide/show elements based on an element being clicked. I could hardcode this using document.getElementById and just add one everytime I have an element I want to hide/display. But it would be ideal if I could retrieve all elements named something and just run a loop on them to hide/show. Then I could just tag an element with a name when writing and this loop would work without alteration. Below my code is simply trying to popup an alert with the value for testing purposes. As for now, it consistently breaks with a null error. I am using and designing for internet explorer 9 as this is what the company uses.
Code:
<input type="radio" name="Area" value="Engineering" id="EngineeringCheck" onclick="javascript: ShowContentEngineering();" />Engineering
<script type="text/javascript">
function ShowContentEngineering() {
alert(document.getElementsByName('EngineeringAreas')[0].value)
document.getElementById('InformationBlock').style.display = 'block';
}
</script>
<h5 name="EngineeringAreas" value="luls"> WHAT THE HECK </h5>
Code above breaks saying that the object at getElementsByName('EngineeringAreas')[0] is null. Clearly, right below it, it is not null... Am I confusing getElementsByName('string')[0].value with the value of the element? Or is it retrieving some other value?
Ideally, I'd add other elements later, tag them with "EngineeringAreas" and never have to mess with the hide/show function.
Edit: Here is the error message:
Unhandled exception at line 53, column 9 in http://localhost:57264/Home/Index
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'value': object is null or undefined
Here you go... seems:
onclick="javascript: <--- not necessary - just reference the function name
ShowContentEngineering needs to be set in the window context
You're referencing the "value" attribute of an element that doesn't allow value attributes (h5)
I made it work instead grabbing the innerHTML of the h5
Code
<input type="radio" name="Area" value="Engineering" id="EngineeringCheck" onclick="ShowContentEngineering();" />Engineering
<h5 name="EngineeringAreas"> WHAT THE HECK </h5>
<script>
window.ShowContentEngineering = function() {
alert(document.getElementsByName('EngineeringAreas')[0].innerHTML)
document.getElementById('InformationBlock').style.display = 'block';
}
</script>
Here's a working fiddle: https://jsfiddle.net/mu970a8k/
Insert .attributes[1] between .getElementsByName('EngineeringAreas') and .value. The 1 points to the second attribute in the <h5> element named EngineeringAreas, which is value. Placing .value after .attributes[1] should return the value text “luls” in the alert box. The alert code should then be set up like this:
alert(document.getElementsByName('EngineeringAreas')[0].attributes[1].value);
More Info: http://www.w3schools.com/jsref/prop_attr_value.asp
This question already has an answer here:
Prepend divs without closing them
(1 answer)
Closed 7 years ago.
I am very confused how the append function works. After I tried using append 3 times, It shows very different from single append function.
In javascript (Append 1 time)
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');
In javascript (Append 3 times)
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
divStep.append('<input type="checkbox" />Test');
divStep.apend('</div>');
In html
<div id="stepTab">
</div>
I found that the append 1 time method worked well as I expected. The another one is very baffling.
Please can someone explain me a little bit about the difference of these 2 methods? I tried to search on the internet but I can't even know a keyword for the search.
I'm very poor in English. So sorry if it is an ambiguous question.
Thank you in advance.
Yea... Let's see what happened every time you append something to the element.
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');
console.log(divStep.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepTab"></div>
return <div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox">Test</div>
var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
console.log(divStep.html());
divStep.append('<input type="checkbox" />Test');
console.log(divStep.html());
divStep.append('</div>');
console.log(divStep.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepTab"></div>
it returns
#1 <div style="width:400px;height:40px;float:left;clear:left;"></div>
add <div...left;"> and </div> automatically.
#2 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test
#3 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test
nothing added.
Conclusion: I suppose that the string will be automatically turned into a complete html element/object, instead of appending the html string directly to the innerHTML of the parent node. Because </div> can't be turned into a html element since it is not a fully enclosed HTML, so nothing happened in #3 append.
.appennd is not a native javascript function. its a jQuery method.
The append() method inserts specified content at the end of the selected elements.
In your code append 3 won't work as you expected since it is not a fully enclosed HTML, but 3 sibling dom elements.