echo an Option value with innerHTML

Question

I'm making an Front-End ui design. And i want to echo a selected font name. I used a tag, with in there multiple tags, with values bound to them. I want the value of the selected option to be echo'd using innerHTML Can someone help me with this problem? thanks in advance! Html code:

function EchoFontName() {
  var x = document.getElementById("FontSelect").selectedIndex;
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementsByTagName("option")[x].value;
  f.innerHTML = FontNameVar;
}

<div id="MainContainer">
  <div id="Left">
    <p id="FontSettings">Font settings</p>
    <p id="Font">Ab</p>
    <p id="FontName">
      <span id="FontWeight"> </span>
    </p>
  </div>
  <div id="Right">
    <select id="FontSelect" onchange="changeFont(this);">
      <option value="roboto">Roboto</option>
      <option value="lato">Lato</option>
      <option value="raleway">Raleway</option>
      <option value="ubuntu">Ubuntu</option>
    </select>
  </div>
</div>

I already got the font change script working so don't worry about that! :)

Are you asking because the element for weight is replaced? If that's the case, add a another prior to that of weight. There are simpler ways to accomplish what you are trying to do with string concatenation instead of implicitly referencing absolute html elements via id. — Josh, Jun 13 '18 at 12:29

score 0 · Answer 1 · edited Jun 14 '18 at 06:51

All you have to do is get the value of the selected option and display that in the section you want.

function changeFont(val) {
    console.log(val);
    var f = document.getElementById("FontName");
    f.innerHTML = val;
}

<div id="MainContainer">
    <div id="Left">
        <p id="FontSettings">Font settings</p>
        <p id="Font">Ab</p>
        <p id="FontName">
            <span id="FontWeight"> </span>
        </p>
    </div>
    <div id="Right">
        <select id="FontSelect" onchange="changeFont(this.value);">
            <option value="roboto">Roboto</option>
            <option value="lato">Lato</option>
            <option value="raleway">Raleway</option>
            <option value="ubuntu">Ubuntu</option>
        </select>
    </div>
</div>

Matus Dubrava · Accepted Answer · 2018-06-13T12:38:57.623

You can do it like this.

use selectElement.value of to get the selected value
you have wrong function name in you HTML - changeFont should be EchoFontName and you don't need to pass this as an argument to that function in this case
you should use textContent instead of innerHTML when you want to add pure text

function EchoFontName() {
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementById("FontSelect").value;
  f.textContent = FontNameVar;
}

<div id="MainContainer">
  <div id="Left">
    <p id="FontSettings">Font settings</p>
    <p id="Font">Ab</p>
    <p id="FontName">
       <span id="FontWeight"></span>
    </p>
  </div>
  <div id="Right">
    <select id="FontSelect" onchange="EchoFontName();">
      <option value="roboto">Roboto</option>
      <option value="lato">Lato</option>
      <option value="raleway">Raleway</option>
      <option value="ubuntu">Ubuntu</option>
    </select>
  </div>
</div>

As a side note, you shouldn't start names of functions and variables with capital letters. Functions starting with capital letters usually refer to constructor functions (not that it changes anything but it might cause a confusion).

Thanks a bunch for the help, im not home at the moment, But ill try them, and mark an answer in a bit! — Joris, Jun 13 '18 at 12:46

echo an Option value with innerHTML

2 Answers2