We Keep Coding

How to pass a JavaScript variable to DIV tag?

I am trying a code to pass a javascript variable to the div tag to change its attribute. If anyone knows how to do this, help me.
<div id="rate" class="money" data-wpac-chan=""></div>
I want to pass a javascript variable to the data-wpac-chan.
<script type="text/javascript">
var div = document.getElementById("rate").data-wpac-chan = "bal";
</script>
It is not working.
I want to replace data-wpac-chan=" " to data-wpac-chan="bal"

This should do it:
document.getElementById("rate").setAttribute("data-wpac-chan", "bal");
SetAtrribute will set any attribute on an HTML element.

You can also use dataset to assign the value to the attributes that has data-. Notice that, you need to use the camelcase as attribute name. So, wpac-chan becomes wpacChan
document.getElementById("rate").dataset.wpacChan = 'bal'
<div id="rate" class="money" data-wpac-chan="">sadasd</div>

Strings not setting in JS

I am working on a javascript project, and I am having trouble displaying an appended string. Right now, I am trying to change Crawler1 and Crawler2 to username that a user input. These usernames are stored in local storage:
<div id="wrap">
<div id="left_col">
<p id="p1">Crawler 1</p>
</div>
<div id="right_col">
<p id="p2">Crawler 2</p>
</div>
</div>
This is the JS script I am using in order to change the p1 and p2 values to the user names. I am very confused why nothing is appending, because when I use a window.alert box,
localStorage.getItem("name") and localStorage.getItem("name2") print the expected values.
document.forms["game"]["p1"].innerHTML = localStorage.getItem("name");
document.forms["game"]["p2"].innerHTML = localStorage.getItem("name2");
does anyone have any idea why the p1 and p2 values wouldn't be changing?

did you try using...
document.querySelector('#left_col p').innerHTML = localStorage.getItem("name");
document.querySelector('#right_col p').innerHTML = localStorage.getItem("name");
...?
Or if you really need to scope the query inside the form
const form = document.querySelector('form[name=game]');
form.querySelector('#left_col p').innerHTML = localStorage.getItem("name");
form.querySelector('#right_col p').innerHTML = localStorage.getItem("name");
[edit] Explanation
Looking your markup, you want to access to a <p> inside a <div id="">.
document.querySelector() allows you to get a DOMElement using a CSS selector.
The css selector #left_col p matches all the <p> inside an element with id="left_col".
More on CSS Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Forms returns an HTMLCollection of HTMLFormElements
You can access the collection with the id of the names and this will return a HTMLFormElement. But using ['element-id'] on the HTMLFormElement won't do anything.
Instead you can use querySelector as #simnutoli has shown or getElementById like below.
localStorage.setItem('a', 'b');
document.getElementById("p2").innerHTML = localStorage.getItem('a');

Javascript get HTML of selected text nodes

I got the following HTML:
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
and I need to get the data-id attributes when I select (highlight) with a mouse these words. I use the following code:
var data = window.getSelection().getRangeAt(0).cloneContents();//this gets the data for all selected words
console.log(data);
It works fine except that when I select last word phrase, it selects only text without html contents. Any ideas how to fix that? I can use jQuery.
If I select 2 or 3 words, I need to get their data-ids respectively to each word, as it is with getRangeAt(0).cloneContents(). The problem is only with the last word, which does not return HTML code.
Thank you.

EDIT:
There has been a similar thread before, here is a working solution:
https://jsfiddle.net/hallleron/wg1pbwbf/2/
Basically you loop through the siblings in the selection to get each value and then parse the array as string to display it in my result paragraph for better visuals.
ORIGINAL:
If you want a jQuery-free version, here is a fiddle: https://jsfiddle.net/hallleron/wg1pbwbf/
The whole Javascript Part is the following:
document.getElementById('editable_phrase').addEventListener("click", getDataId);
function getDataId(){
console.log(window.getSelection().anchorNode.parentElement.attributes[0].nodeValue);
}
So every time the event listener detects a click, it gets the selected text/span and extracts its data-id attribute from the object.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
<script>
$('#editable_phrase').on('click','span',function(){
var res = $(this).attr('data-id');
alert(res);
})
</script>

Cannot manage to change the inner html of a div element

I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working

$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work

as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"

In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.

in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";

Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";

how to display text in div dynamically

I have searched on the forum and saw posts about changing text dynamically upon click. But in my case I want to change the display dynamically when loading the page from beginning. I already have a function that figure out what I should display:
function phone()
{
//code here
return phone;
}
And my question is how to display the returned phone number in the div below to replace the 1.888.888.8888 part. Can anyone offer some insights? Thank you!
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call 1.888.888.8888</span></span>
</div>

I would change the HTML to add another <span> tag around the phone number and give that span tag an id attribute in order to access it easily (broke it up on separate lines to reduce scrolling):
<div class="add-info">
<span class="rightfloat">
Order online <span class="red">
or call <span id="contact-number"></span>
</span>
</span>
</div>
Then after the page loads update the span with whatever value you want:
window.onload = function() {
document.getElementById('contact-number').innerHTML = PHONE_NUMBER_VALUE;
}
In JQuery, it would be:
$(document).ready(function () {
$('#contact-number').html(PHONE_NUMBER_VALUE);
});

You can,
<body onload="phone();">
<div class="add-info">
<span class="rightfloat">Order online <span class="red">or call
<span id="phone"></span>
</span>
</div>
</body>
And set the value when the function runs;
function phone() {
document.getElementById("phone").innerHTML = "1.888.888.8888";
}

Instead of returning 'phone', why don't you put an id on your span and just use
document.getElementById('spanId').innerHTML = phone
in your javascript?

Call you code from the window.onload event.

I would separate the number into additional <span> tag with its own id and change content of it with js...
document.getElementById('id_of_span').innerText = 'new number';

Try this
<script>
function phone(number) {
var redText = document.getElementByClassname("red")[0];
redText.innerHTML = "or call " + number;
}
</script>
To call it you can use clicks, loads or anything else. For example
<script>
window.onload = phone('NEW NUMBER HERE');
</script>
Bear in mind that adding another window onload function later will displace this one, so you would either need to add to it, or use a double delegate function, but that's another story...