How to assign a variable value to an HTML input created in Javascript / How to style HTML elements in Javascript

Question

Here's the code I am currently using.

function firstChildAge() {
  var header = document.createElement('H1');
  var body = document.getElementsByTagName('BODY');
  var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
  var inputChildOne = document.createElement("Input");
  header.appendChild(textnode);
  document.body.appendChild(header);
  document.body.appendChild(inputChildOne);
}

a) How would I assign a variable value to the response created by the user to the Input?

b) How can I style elements inside Javascript? For example, how can I make the text "WHAT IS THE AGE OF THE FIRST CHILD?" red, or change the font size?

Thank you!!!

with jQuery: $("H1").css("color","red"). this can also be called inside a function and the function gets triggered by clicking a button or whatever — hansTheFranz
– hansTheFranz, Commented Jul 22, 2017 at 1:52
@hansTheFranz I don't really want to incorporate another language. Anyway I can do this with just JS, HTML, or CSS? — Matt Kaplan
– Matt Kaplan, Commented Jul 22, 2017 at 1:53

PotatoManager · Accepted Answer · 2017-07-22 02:38:08Z

1

You can retrieve the current string of the input box using.

var val=document.getElementById('id of the input').value;//you can use any other element selection method too

to set the color you can use

document.getElementById('id of the tag').style.color='color name or hex';

You can use this to set the id of an element

element.setAttribute("id", "uniqueIdentifier");

Also textNodes dont have style attributes, they take the parent elements features like this

var header = document.createElement('H1');
     var body = document.getElementsByTagName('BODY');
     var span = document.createElement('span');
     // Set DOM property
     span.style.color = 'red';
  span.appendChild(document.createTextNode('WHAT IS THE AGE OF THE FIRST CHILD'));

 // Add to document
 document.body.appendChild(span);

 var inputChildOne = document.createElement("Input");

 header.appendChild(textnode);
 document.body.appendChild(header);
 document.body.appendChild(inputChildOne);

edited Jul 22, 2017 at 2:38

answered Jul 22, 2017 at 1:56

PotatoManager

1,7751 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Kaplan Over a year ago

That's exactly what I though at first also... but where do I assign an id tag? It doesn't seem to be applicable on any of the lines?..

PotatoManager Over a year ago

check my edit, you can set the id first and then use it

Matt Kaplan Over a year ago

I'm using the following code, but nothing is working. Please let me know what I'm doing wrong. var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?"); textnode.setAttribute("id", "blablabla"); document.getElementById("blablabla").style.color="red";

Kermit · Accepted Answer · 2017-07-22 02:19:33Z

1

a) you can use document.getElementById('id of input').value = variableValue

b) you can use document.getElementById('id of tag').style.styleName = val,for example, using document.getElementById('id of tag').style.color = 'red' to set color,using document.getElementById('id of tag').style['font-size'] = '14px' to set font-size

answered Jul 22, 2017 at 2:19

Kermit

1,0626 silver badges10 bronze badges

4 Comments

Matt Kaplan Over a year ago

Thank you, but same question, how can I assign the text an ID? I can't figure out where to go, and I tried the method above and it didn't work.

Kermit Over a year ago

using document.getElementById('id').textContent = yourText to set text of HTMLelement

Matt Kaplan Over a year ago

Not how to set the text, but how to set the ID

Kermit Over a year ago

I'm so sorry, you can use document.getElementById('id').setAttribute('id','idValue')

Collectives™ on Stack Overflow

How to assign a variable value to an HTML input created in Javascript / How to style HTML elements in Javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related