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';
    }
}

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

<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>