How do I output a variable inside this span tag (which is inside JavaScript but HTML context)

Question

function calculateDisplay () {
    var province = document.forms["calculateForm"]["province"].value;
...
...
document.getElementById("secondHeader").innerHTML = "Canada | " + province + " | 2017 Tables";

return false;
}

how do I format to display the variable province as color: black (usually that secondHeader id is lightgrey)

Thank you!

Put it inside a <span> tag.

jmargolisvt
– jmargolisvt

2017-05-12 16:22:48 +00:00
Commented May 12, 2017 at 16:22 — jmargolisvt
– jmargolisvt, Commented May 12, 2017 at 16:22

Woodrow · Accepted Answer · 2017-05-12 16:26:15Z

1

Please let me know if this is what you're looking for.

function calculateDisplay() {
  var province = document.forms["calculateForm"]["province"].value;
  document.getElementById("secondHeader").innerHTML = "Canada | <span class=\"province-color\">" + province + "</span> | 2017 Tables";
  return false;
}

calculateDisplay();

<style type="text/css">
  .province-color {
    color: #000;
  }
</style>
<span id="secondHeader" style="color:green;"></span>
<form id="calculateForm">
  <input type="text" name="province" value="Alberta" />
</form>
<button onClick="calculateDisplay();">Re-calc</button>

answered May 12, 2017 at 16:26

Woodrow

2,8221 gold badge17 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How do I output a variable inside this span tag (which is inside JavaScript but HTML context)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related