Develop Reference

How to assign HTML text to a JavaScript variable?

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();

Setting and getting localStorage with jQuery

I am trying out localStorage and attempting at getting text from a div and storing it in localStorage, however, it sets it as an [object Object] and returns [object Object]. Why is this happening?
localStorage.content = $('#test').html('Test');
$('#test').html(localStorage.content);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>

You said you are attempting to get the text from a div and store it on local storage.
Please Note: Text and Html are different. In the question you mentioned text. html() will return Html content like <a>example</a>. if you want to get Text content then you have to use text() instead of html() then the result will be example instead of <a>example<a>. Anyway, I am using your terminology let it be Text.
Step 1: get the text from div.
what you did is not get the text from div but set the text to a div.
$('#test').html("Test");
is actually setting text to div and the output will be a jQuery object. That is why it sets it as [object Object].
To get the text you have to write like this
$('#test').html();
This will return a string not an object so the result will be Test in your case.
Step 2: set it to local storage.
Your approach is correct and you can write it as
localStorage.key=value
But the preferred approach is
localStorage.setItem(key,value); to set
localStorage.getItem(key); to get.
key and value must be strings.
so in your context code will become
$('#test').html("Test");
localStorage.content = $('#test').html();
$('#test').html(localStorage.content);
But I don't find any meaning in your code. Because you want to get the text from div and store it on local storage. And again you are reading the same from local storage and set to div. just like a=10; b=a; a=b;
If you are facing any other problems please update your question accordingly.

Use setItem and getItem if you want to write simple strings to localStorage. Also you should be using text() if it's the text you're after as you say, else you will get the full HTML as a string.
Sample using .text()
// get the text
var text = $('#test').text();
// set the item in localStorage
localStorage.setItem('test', text);
// alert the value to check if we got it
alert(localStorage.getItem('test'));
JSFiddle:
https://jsfiddle.net/f3zLa3zc/
Storing the HTML itself
// get html
var html = $('#test')[0].outerHTML;
// set localstorage
localStorage.setItem('htmltest', html);
// test if it works
alert(localStorage.getItem('htmltest'));
JSFiddle:
https://jsfiddle.net/psfL82q3/1/
Update on user comment
A user want to update the localStorage when the div's content changes. Since it's unclear how the div contents changes (ajax, other method?) contenteditable and blur() is used to change the contents of the div and overwrite the old localStorage entry.
// get the text
var text = $('#test').text();
// set the item in localStorage
localStorage.setItem('test', text);
// bind text to 'blur' event for div
$('#test').on('blur', function() {
// check the new text
var newText = $(this).text();
// overwrite the old text
localStorage.setItem('test', newText);
// test if it works
alert(localStorage.getItem('test'));
});
If we were using ajax we would instead trigger the function it via the function responsible for updating the contents.
JSFiddle:
https://jsfiddle.net/g1b8m1fc/

The localStorage can only store string content and you are trying to store a jQuery object since html(htmlString) returns a jQuery object.
You need to set the string content instead of an object. And use the setItem method to add data and getItem to get data.
window.localStorage.setItem('content', 'Test');
$('#test').html(window.localStorage.getItem('content'));

How to find an element attribute through searching for another attribute of that element

I'm trying to access an element's attribute value, by finding a different attribute, by name, of that same element.
Here's some code:
<option data-img-src="http://example.com/pic.jpg" value="Pool Party 21" pdf-data="http://example.com/myPDF.pdf"></option>
<img class="image_picker_image" src="http://example.com/pic.jpg">
Here's some PHP where I try to get the SRC of that image, store as a variable. Then, try to find another element where the SRC of the image (the previously stored variable) is an attribute called data-img-src that holds that value.
Finally, I try to store that found-elements attribute called "pdf-data" as a string in another variable.
pdfbgImage = $('.tab-pane.active div.thumbnail.selected').children('img').attr('src');
pdfURL = $("[data-img-src=pdfbgImage]").attr('pdf-data');
I don't believe my code is right. Can anyone help?

You have to concatenate the first variable into the second selector
var pdfbgImage = $('.tab-pane.active div.thumbnail.selected').children('img').attr('src');
var pdfURL = $("[data-img-src='"+pdfbgImage+"']").attr('pdf-data');

unable to grab the children div

I am trying to grab a div inside a divContainer.
On a menu mouse over I am grabbing the value of custom data attribute and the name of div to grab.
Now the code is:
containerNameToGrab = $(this).attr('data-containerName');
It returns menu1Container.
Now i added a # using this containerNameToGrab = '#' + containerNameToGrab;.
And finally I am trying to find the div using this:
currentContainerDiv = $('.mainMenuSlidingContainer').find(containerNameToGrab);
Now, when i checked the value of currentContainerDiv it returned Object object.
Please tell me where I am doing it wrong.
Thanks.
OK THE PROBLEM IS SOLVED NOW I USED # directly in data-customattribute and then grabbed the lement. thanks.

Can I use a variable in JS for my html?

I have a JS file CharacterSelection where a user can select an avatar and type their name into a textarea.
Now I want to set a text div in an html file to the contents of the textarea. I will use it to display the player's name at a specific location on the screen.
I know that I can set a div to a text, such as: <div id ="statSheetExitButton">Exit</div> will show "Exit" (style and location depending on css)
I'm wondering if there is any way to put a String variable in there, since I will not know what name the player enters.
I grab the textarea's contents using var name = $("#nameTextBox").val();
I'm thinking that saying <div id ="playerName">name</div> will display the text "name".
Is there a way to accomplish my goal?

$("#nameTextBox").change(function(){
$("#playerName").html($(this).val());
});
This will attach an event handler to the textbox so everytime the name changes the div is updated.
Here is a working example. http://jsfiddle.net/2NkTb/
Please note that for the onchange event you must tab out of textbox or the textbox must lose focus

var name = $("#nameTextBox").val();
$("#playerName").html(name);

Do this:
var name = $("#nameTextBox").val();
$('#playerName').text(name);

You could do something like this which will replace the html of the tag with your JavaScript string:
$('#playerName').html(myNameVar);
Other than that, I don't think you can directly inject JavaScript variables like you would in a template language.

Try:
$('#playerName').html($("#textbo").val());

var playerName = 'John Dow'
document.getElementById('playerName').innerHTML=playerName

You need to set the property innerHTML of you div element.
$("playerName").innerHTML = name;