Change value of <input> to include a superscript, using Javascript

Question

The following code works correctly for me, in HTML.

<input type = "text"   name = "var_1"   id = "i_var_1"   value = "x&sup8">

The following, using Javascript, also works:

<p id = "p1"><input type = "text"   name = "var_1"   id = "i_var_1"   value = "0"></p>

<script....>

q1 = document.getElementById("p1");

q1.innerHTML = '<INPUT TYPE = "text"   name = "var_1a"   id = "i_var_1a"  value = "x&sup8">';

</script>

However I need to add in the superscript when a button is pressed. So I have something like:

<p id = "p1"><input type = "text"   name = "var_1"   id = "i_var_1"   value = "0"></p>

<input type = "button"   id = "i_button"   value = "Add the superscript"    onclick="Add_Superscript()";>

<script.....>

function Add_Superscript()
{

q1 = document.getElementById("p1");

b1 = document.getElementById("i_var_1");

c1 = b1.value.toString() + "&sup8";

q1.innerHTML = '<INPUT TYPE = "text"   name = "var_1a"   id = "i_var_1a"  value = c1.value>';

}

</script>

The above code does not reproduce the superscript properly.

Anyone any ideas? Thanks in advance for comments.

Answer 1

Not sure this is what you want, but it adds &sup8 to whatever is in the input box.

function Add_Superscript() {

  q1 = document.getElementById("p1");

  b1 = document.getElementById("i_var_1");
  
  c1 = b1.value.toString() + "&sup8";

  q1.innerHTML = '<INPUT TYPE = "text"   name = "var_1a"   id = "i_var_1a"  value = "' + c1 + '">';

}

<p id="p1">
  <input type="text" name="var_1" id="i_var_1" value="0">
</p>

<input type="button" id="i_button" value="Add the superscript" onclick="Add_Superscript()" ;>

Answer 2

You have several typos in your code and a lot of unnecessary code as well. You just need to set up a click event handler on the button that populates the value of the pre-existing input. No need to create a new input.

A few notes:

When you were trying to create the new input element (which it turns out you don't need to do in the first place), you had the entire thing as a string. You need to inject the dynamic value into that string, by terminating the string, concatenating the new value in and then concatenating the closing of the string, like this:

q1.innerHTML = '<input type="text" name="var_1a" id="i_var_1a" value=' + c1.value + '>';

Next, it's best to use good naming conventions for elements and variables. Prefix an id and name with something that describes the "type" of thing the element is. Use btn (button), txt (textbox), chk (checkbox), rad (radio button), etc. And don't use _ (that's a very old convention). Instead use "camelCase". Further, with form elements, you need to give them a name for form submission purposes, but it is also a good idea to give them and id for CSS and JavaScript purposes. Use the same id that you used for name so that you don't have two different names for the same thing.

Lastly, don't configure your HTML elements to event handlers via HTML attributes (onclick, onmouseover, etc.). Doing this creates global anonymous functions that alter the this binding in the callback function, it creates "spaghetti code" that is hard to scale and debug and it doesn't follow the W3C DOM Event specification. Instead, do all the work in JavaScript and use .addEventListener() to connect functions to events.

// Get references to the relevant DOM elements
var btn = document.getElementById("btnGo");
var input = document.getElementById("txtInput");

// Set up a click event handling function
btn.addEventListener("click", add_Superscript);

function add_Superscript(){
 // Create a new value that is the old value plus a "superscript" value
 var newVal = input.value + "&sup8";
 // Update the input with the new value:
 input.value = newVal;
}

<p>
  <input type="text" name="txtInput" id="txtInput" value="0">
</p>

<input type = "button" id="btnGo" value="Add the superscript">

Answer 3

I don't know what you're trying to do but maybe it's because of the c1.value ! Try: q1.innerHTML = '<INPUT TYPE = "text" name = "var_1a" id = "i_var_1a" value =' + c1 + '>';