We Keep Coding

How to rewrite text of an option in Javascript?

I've encountered one issue: I don't know how to rewrite the (inner)text of an option in a select.
My goal would be something like that:
<select id="example-dropdown">
<option id="option-id" value="example-option">Example</option>
</select>
<button id="change-option-text-btn" onclick="document.querySelector('#option-id').innerText = 'Example 2'">Click Me</button>
I know this is a possible duplicate, but all of the answers I found are not working for me (I also found some jQuery ones, I don't know if they don't work neither), such as:
document.querySelector("#example-dropdown").options[0].text = "Example 2"
Didn't encounter any error messages.
Edit: Ok, I'm sorry, I didn't say it: this is just an example code, the onclick is there just for saving time

Well, there are a couple of issues with your current code and I will point them out briefly here.
First of all, it is better to stick with unobtrusive solution in your code and handle all of the logic inside a <script> or JS file instead of handling them in the HTML itself. So for this, I just removed the onclick handler from the HTML and moved it in the JS section and tried to access the element and adding event to it by addEventListener approach.
Your first snippet should work as expected if you select the right element in the query selector, so you can change the selector to document.querySelector('#example-dropdown option[value=example-option]'), but due to the innerText drawbacks (Which you can find here) it is better to not use it at all for changing the inner text of elements.
If you do not want to use innerText for its drawbacks, to change the content of the HTML tag you can use the innerHTML or textContent property. Which is in your case since you are only trying to change the text of the option alone you need to use textContent.
Your final code should be something like this:
const btn = document.querySelector('#change-option-text-btn');
const select = document.querySelector('#example-dropdown');
btn.addEventListener('click', function() {
select.options[0].textContent = 'Example 2'
});
<select id="example-dropdown">
<option value="example-option">Example</option>
</select>
<button id="change-option-text-btn">Click Me</button>
Also, in your particular case since you are trying to change the inner text of the select option there is one more option for you as you tried earlier is to use text property which works the same as textContent and it is only available for HTMLOptionElements.
So, document.querySelector("#example-dropdown").options[0].text should do the work for you.
And it will be like this:
const btn = document.querySelector('#change-option-text-btn');
const select = document.querySelector('#example-dropdown');
btn.addEventListener('click', function() {
select.options[0].text = 'Example 2'
});
<select id="example-dropdown">
<option value="example-option">Example</option>
</select>
<button id="change-option-text-btn">Click Me</button>

Uncaught TypeError: Cannot read property 'append' of null in jQuery

Starting from this jQuery code:
var country_name_list=document.getElementById("country");
$.post(getcountry,function (data) {
var Rcountry_name_list=JSON.parse(data);
var arr=[];
for(var i=0;i<Rcountry_name_list.countries.length;i++){
var r_id=Rcountry_name_list.countries[i].country_id;
var r_name= Rcountry_name_list.countries[i].country_name;
var option_name = document.createElement("option");
option_name.textContent =r_name;
option_name.value = r_id;
country_name_list.append(option_name);
}
});
HTML
<form method="post" action="" id="rform" novalidate="novalidate">
<label class="control-label">Country </label>
<select id="country" name="country" class="form-control" >
<option value=" " disabled selected hidden>Select Country</option>
<option value="0"></option>
</select>
</form>
On the line country_name_list.append(option_name); I get the following error
Uncaught TypeError: Cannot read property 'append' of null in jQuery

First of all, when a DOM selector returns null, it means the element was not found. So you have to wait for the DOM to be loaded.
With jQuery it's enough to wrap your selector in the following statement
$(document).ready(function(){
});
vi5ion's right, but you could also improve your code
var country_name_list = document.getElementById("country");
Here you didn't use jQuery, so you have to keep using javascript DOM methods.
$.get(getcountry, function (data) {
Here $.get is enough
var response = JSON.parse(data);
I think Capital letter is only for classes
var option, current;
If you create the variables here, you avoid creating a new variable for each loop, so will save time!
var list = response.countries;
for(var i=0; i < list.length; i++){
current = list.countries[i];
option = document.createElement("option");
option.textContent = current.country_name;
option.value = current.country_id;
country_name_list.appendChild(option_name);
As vi5ion suggests appendChild() is what you need
}
});
It seems easier to read the code now, didn't it?
Hope this is useful!

country_name_list is not a jQuery object and therefore doesn't have the append() function.
In fact, most of your code is plain JavaScript and not jQuery, so you would probably want to use the function appendChild() instead.
Edit: added alternative jQuery solution below
If you insist on using jQuery you could wrap your variable.
That can either be done here
var country_name_list = $('#country');
or here
$(country_name_list).append(option_name);
but not both.

When you receive an error of type "Cannot read property XXX of null", you want to make sure that your element exists when your script is called.
For instance, you would place your javascript right before the closing tag to make sure that the element has is in the DOM.
Alternatively, if you have your script inserted in the header, or prior in the page, you may want to enclose i inside the $.ready() method to ensure that it is only run after the DOM is ready
$( document ).ready(function() {
... your code
}
You can find more information at: https://api.jquery.com/ready/

I faced a similar issue, I did try the above solutions, but mine was due to different reason.
Therefore, one solution would be wrapping it under the document.ready
$(document).ready(function(){
});
One another solution will be, try using jQuery() instead of $(), this was helpful for me.
jQuery('#item_field').append('<div></div>');
instead of
$('#item_field').append('<div></div>');

I got the same error
I tried entering the script tag in the body section
It worked for me

document.getElementByName()[0] undefined

This is my js function
function toggleCountry(country)
{
var elem = document.getElementsByName(country)[0].value;
alert(elem);
}
Its being called onclick event
<div class="navBarItems">USA</div>
I have another div with the attribute name="usa" and I want to search for it and disable the text. However, I always get undefined as it returns in my alert.
Edit: Its a div tag.

document.getElementsByName(name) requires that you make use of the name="" attribute.
With that in place, try changing:
var elem = document.getElementsByName(country)[0].value;
To:
var elem = document.getElementsByName(country)[0].innerHTML;
(provided this is your goal)
.value is the wrong method here (there's no value attribute on your element). I was able to access the .innerHTML just fine, so your function is selecting the appropriate element. If .innerHTML is not what you want, you can substitute that for another method. I'm not entirely sure what you're reaching for here, but hopefully this jsfiddle helps:
http://jsfiddle.net/S68qr/

I am not sure of your implementation and Stuart Kershaw already provided a great solution.
Another approach would be to change your HTML to provide a more dynamic selection.
<select onchange="toggleCountry(this.value)">
<option value="USA">USA</option>
<option value="CDN">CDN</option>
</select>
And you can use this function to retrieve the value.
function toggleCountry(country)
{
alert(country);
}
http://jsfiddle.net/LzubU/

Control textbox with JavaScript by adding a string to dynamic id

I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled

disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.

Here is one way:
http://jsfiddle.net/C2WaU/1/

If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}​
A working example: http://jsfiddle.net/ve9Gz/3/

Adding option elements using .innerHTML in IE

I have a txt variable that contains my html string that I need to set for a drop down list. The code works fine in all the other browsers except for IE. The basic code is shown below.
while loop with some more code
document.getElementById('theSelector').innerHTML = txt;
where 'theSelector' is the id of my select element for my form
So basically IE poops out and doesn't generate my list. I'll post my webpage below if you'd like to look at the source and everything that I'm doing. If you want to see how the site should function just run it in another browser that's not ie.
http://1wux.com/Resume/signUp.html

Based on your comment that it isn't generating your list, and Jared's comment that you're trying to add options, try something like this:
var list = document.getElementById('theSelector');
var newOp = document.createElement("option");
newOp.text = "Txt";
newOp.value = "1";
list.options.add(newOp);
EDIT
Per Jared's comment, the following may offer you a bit of a performance advantage:
list.options[list.options.length] = newOp;

As others have mentioned, this is a bug in all version of IE. I would use #AdamRackis's solution, but if you must build your HTML with string, the only workaround seems to be use outerHTML and include your <select> in the string.
Demo: http://jsfiddle.net/ThinkingStiff/TWYUa/
HTML:
<select id="select"></select>
Script:
var options = '<select id="select"><option>one</option><option>two</option></select>';
document.getElementById( 'select' ).outerHTML = options;

use Jquery
$('#theSelector').html(txt);