We Keep Coding

How to send value to an div which has textbox role

I am trying to send a new value to a div which has textbox role and I am getting this error:
Uncaught TypeError:document.querySelector(...).value is not a function at <anonymous>:1:59
HTML CODE
<div class="msg-form__contenteditable t-14t-black--light t-normal flex-grow-1 full-height notranslate"contenteditable="true" role="textbox"aria-multiline="true" aria-label="Write a message…"> 
<p>
<br>
</p>
</div>
MY CODE
It finds the element, but it doesn't send the value.
document.querySelector('[aria-label="Writea message…"]').value("Paul")

Here's some light reading on the textbox role. Straight from there:
It is a better practice to use an <input> element with type="text", or a <textarea> element instead of the ARIA textbox role. When using either semantic element, the ARIA textbox role is not necessary. See Notes on Using ARIA in HTML.
If you're set on using a <div>, value isn't a valid attribute for it, and you'll need to use .innerText or innerHTML
document.querySelector('[aria-label="Write a message…"]').innerHTML = 'Paul';
Also: .value() isn't a function (that's the error you're receiving). If you're trying to set the value of an element that value is a valid attribute for, you'll use element.value = 'Paul'; with JavaScript, or element.val('Paul'); with jQuery

I am unable to a inserting the content HTML pre tag

Function objective()
{
Document.getelementbyid("pre").innerhtml=""
}
And in the HTML for my li in nave, I declared the onclick function but it is not working.
Note:- I am clear about case sensitivity in js and using bootstrap3
for resposive.

Use document.getElementsByTagName instead. This will return an array of all the elements that have that tag name.
Due to it returning an array, you need to make sure you use [0] to find the first index in the array.
function objective(){
document.getElementsByTagName("pre")[0].innerHTML="";
}
objective();
<pre>This is some content that will not show in the snippet</pre>
<div>This content will though</div>

getelementbyid() expect a id, not a tag name,your code will call on html like
<pre id="pre">
</pre>
if you want to select elementnot by id but form tag name use document.querySelectorAll("pre")[0] or document.querySelector("pre")
remember querySelectorAll return an array!!

getElementById selects an element with defined id as in your case pre as an id.
You must have an id attached to your element same that of argument in getElementById().
Or, you can use getElementsByTagName which selects element given in argument.

How to get inner html based on attribute Id

I have the attibute Id.
In console when I type in the following jquery command:
$('#LocationRadioButtons a')
I get the following output
[<a id=​"4" href=​"#">Test​</a>​, <a id=​"5" href=​"#">Test1​</a>​, <a id=​"6" href=​"#">test2​</a>​]
Which is an array
If I type in the following jquery command:
$('#LocationRadioButtons a').first();
It will return the first element in that array:
Test​​
How do I return an element based on it's Id, and return its innerHTML. For example id = 5 innerHTML is test1,
Cheers

You can get the html by using html()
You can use
$('#LocationRadioButtons #5').html();
Based off your markup you can actually simply use
$('#5').html();
PS: I'd refrain from having ids start with a number. HTML4 doesn't like this.

while Id is unique for this element you can directly use id to get html
$('#5').html();

Try this,
$('#LocationRadioButtons a[id$="5"]').text();

an id is unique so you can just use the id selector to select an element with a specific id like this:
$('#5').html();

Try this:
As you already have the elements id, just do
$('#5').html();
Will alert Test1
jquery each() loop is useful when you don't have a selector and you want to parse through each element to check for certain condition.
$('#LocationRadioButtons a').each(function(index, value){
var myattr = $(this).attr('id');
if(myattr=='5') {
alert( $(this).html() );
}
});

Insert javascript (jquery) variable in html input field (textbox)

With span and div this works
jQuery
$('#exchange_rate1').html(data[0].FinalCurrencyRate);
HTML
<span id="exchange_rate1"></span>
But if the HTML is an input element such as <input type='text' name='exchange_rate1' id='exchange_rate1' value='<?php echo $post_exchange_rate; ?>> then nothing happens.
Removed php code from value the same nothing.
I also tried document.getElementById("exchange_rate1").html(data[0].FinalCurrencyRate); but I also see nothing.
Now clear, that need to use val. I just searched google for how to insert jquery variable in input field. Could not find.

Use jQueryObject.val(some_value) to set the value of an input, not html().

To be more specific:
// store the value you're looking to assign
var data = [
{ FinalCurrencyRate: <?= $post_echange_rate; ?> }
];
the jQuery way:
$('#exchange_rate1') // grab the <input>
.val(data[0].FinalCurrencyRate); // and assign it from the variable
the straight js way:
// normal JS version:
document.getElementById('exchange_rate1') // grab the <input>
.value = data[0].FinalCurrencyRate; // assign it
Any kind of form fields (<input>,<select>,<textarea>) use .val() to get/set since they don't contain child elements. .html() should be used for structural elements.

In case of text use as
$("#exchange_rate1").val('Hello');

This is because you aren't supposed to be setting the innerHTML of the input element, but the value.
In jQuery you use the .val() method:
$('#exchange_rate1').val(data[0].FinalCurrencyRate);
Or with plain JavaScript, you're changing the value property of the HTMLInputElement object:
document.getElementById('exchange_rate1').value = data[0].FinalCurrencyRate;

For textual input boxes, use .val(), for textareas, use .text(), and for non-input type elements, use .html().

All you need is
$("#exchange_rate1").val('Hello');

How do I change the value of an input element?

is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);

If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.

You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit

//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});