Insert text into HTML element with Javascript function return

Question

This is a piece of my HTML code:

<label for="input_train"><script>mountainTrains("all");</script></label>

mountainTrains() is a javascript function, which returns string. I want this string to be passed as a text of the label element on the website. This piece of code however only results in an empty string, even if mountainTrains() returns non-empty string. Is there anything wrong about the syntax I'm trying to access javascript function from HTML?

Function definition:

function mountainTrains(par) {
    if (par !== 'all') {
        return 'One train';
    } else {
        return 'All trains';
    }
}

Where's the function definition? Without providing a [mcve] that demonstrates the issue, it is hard for anyone to help troubleshoot this without guessing. From what is shown guesses would require us asking far too many questions to get to the root — charlietfl, Apr 04 '21 at 13:41
Additionally it is not good practice to add a script tag inside another one — Diogenis Siganos, Apr 04 '21 at 13:44
You should combine all your script tags in one place, or even decouple them from the HTML code (in other words add them to another file). — Diogenis Siganos, Apr 04 '21 at 13:45
Does this answer your question? [How do I change the text of a span element using JavaScript?](https://stackoverflow.com/questions/1358810/how-do-i-change-the-text-of-a-span-element-using-javascript) — sergdenisov, Apr 04 '21 at 13:49

score 2 · Answer 1 · edited Apr 04 '21 at 13:53

2

To edit HTML with JS, don't put the script tag inside the element you're trying to edit. Instead do something like this:

function mountainTrains(par) {
  if (par !== 'all') {
    return 'One train';
  } else {
    return 'All trains';
  }
}
document.getElementById("my_label").innerHTML = mountainTrains("all");

<label for="input_train" id="my_label"></label>

edited Apr 04 '21 at 13:53

Daweed

1,419
1
9
24

answered Apr 04 '21 at 13:46

knosmos

636
6
17

score 1 · Answer 2 · answered Apr 04 '21 at 13:50

I will suggest you to modify the text content of the label element like the following way:

<script>
  document.addEventListener('DOMContentLoaded', () => {
  
    document.querySelector('label[for=input_train]').textContent = mountainTrains("all");
    
    function mountainTrains(par) {
      if (par !== 'all') {
        return 'One train';
      } else {
        return 'All trains';
      }
    }
    
  });
</script>

<label for="input_train"></label>

charlietfl · Answer 3 · 2021-04-04T14:09:27.637

The only way to make this work by simply placing the function call inside the element and not passing in any element identifiers is to use document.currentScript and then setting the text of the parentNode.

Note this is not commonly done. I'm just pointing out how it can be done.

I would not pursue this very far as there more robust approaches depending on your use case that don't require individual script tags for each call

label{  padding: 1em; border:1px solid grey}

<script>
function mountainTrains(par) {
    let txt = par === 'all' ? 'All trains' : 'One train';
    document.currentScript.parentNode.textContent = txt
}
</script>

<label for="input_train"><script>mountainTrains("all");</script></label>
<label for="another_train"><script>mountainTrains("one");</script></label>

score 0 · Answer 4 · answered Apr 04 '21 at 13:54

You are trying to use JavaScript for DOM manipulation I would not recommend to insert the script tag in the label itself. The best practice is to put it right before the closing tag of the body element, more here

also the function to add this text insde the lable should look something like this

  document.getElementsByClassName("random_class_name")[0].innerHTML = 'the text for the label'

<label class="random_class_name" for="input_train"></label>
<input name="input_train" type="text">

Note that we are referring to document.getElementsByClassName("random_class_name")[0] it is because getElementsByClassName function returns all elements that have such a class name so if there are 10 of them you can refference them like you would an array. This particular one is called a NodeList

score 0 · Answer 5 · answered Apr 04 '21 at 14:03

<label for="input_train" onclick="event.target.innerText = mountainTrains('all');">text</label>

  
  <script>
  
    
    function mountainTrains(par) {
    if (par !== 'all') {
        return 'One train';
    } else {
        return 'All trains';
    }
}
    
  </script>

Insert text into HTML element with Javascript function return

5 Answers5