Use JavaScript variable in html

Question

I am creating a web page wherein the user can play the audio found on the url he entered.

For this I am first taking an input from the user, storing in a variable in JavaScript and then need to use the entered URL back in my html.

My JavaScript and html codes:

<script type="text/javascript">
function loader()
{
  var inpt=document.getElementById("userInput").value;               
}
</script>

<input type="text" id="userInput">
<input type="submit" id="submit" onclick="loader()">

**use the value of inpt here**

I cannot figure out how to use the input url back in the html. Am I doing something wrong ?

Also, is there any better way of doing this.

Edit: What I am actually doing is trying to use the entered url in place of "/media/demo.wav" in this code:

<div class="list-group" id="playlist">
<a href=""
ng-class="{ 'list-group-item': true, active: isPlaying('../media/demo.wav') }"
ng-click="play('../media/demo.wav')">
<i class="glyphicon glyphicon-play"></i>
*song name*
</a>
</div>

Please see my update @Swapnil. I think it is a better solution than doing an attribute replacement. — Charles
– Charles, Commented Jul 8, 2015 at 19:49

Charles · Accepted Answer · 2015-07-08 19:49:01Z

3

You can create a div and use JavaScript to populate the HTML inside the div. Here is what it might look like:

HTML:

<div id="audioplayer"></div>

And the JavaScript:

document.getElementById('audioplayer').innerHTML = "audio player code"+inpt+"other audio player code";

Update:

You shouldn't be doing an attribute replace. Just wrap all that code in the audioplayer div, and set the innerHTML like what I showed you earlier:

JavaScript:

var audioplayerInnerHTML = '<div class="list-group" id="playlist">';
audioplayerInnerHTML .= '<a href="" ng-class="{ \'list-group-item\': true, active: isPlaying(\'..'+inpt+'\') }" ng-click="play(\'..'+inpt+'\')">';
audioplayerInnerHTML .= '<i class="glyphicon glyphicon-play"></i>';
audioplayerInnerHTML .= '*song name*';
audioplayerInnerHTML .= '</a>';
audioplayerInnerHTML .= '</div>';

document.getElementById('audioplayer').innerHTML = audioplayerInnerHTML;

edited Jul 8, 2015 at 19:49

answered Jul 8, 2015 at 13:27

Charles

4,5489 gold badges44 silver badges82 bronze badges

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

2 Comments

Swapnil Pandey Over a year ago

in the last line of your code you have written 'audioplayer' as the element's id. but where is it ? Do I have to make it in html ? how?

Charles Over a year ago

I already posted the HTML in the original response. It is just an empty div with id of "audioplayer". The contents of the div are populated using the JavaScript .innerHTML function.

hmak · Accepted Answer · 2015-07-08 13:49:50Z

1

Use This Code:

function loader() {
    document.getElementById("result").innerHTML = document.getElementById("userInput").value;               
}

<input type="text" id="userInput">
<input type="submit" id="submit" onclick="loader()">
<div id="result"></div>

Update

For achieving what you said in your edit, you can use the code below:

var attr = document.getElementById("ELEMENT_ID").getAttribute('ng-class');
attr = attr.replace("../media/demo.wav", WHATEVERE_YOU_WANT);
document.getElementById("ELEMENT_ID").setAttribute("ng-class", attr);

edited Jul 8, 2015 at 13:49

answered Jul 8, 2015 at 13:27

hmak

3,9981 gold badge23 silver badges33 bronze badges

4 Comments

Swapnil Pandey Over a year ago

just to confirm, can I place my inpt variable in place of WHATEVER_YOU_WANT ? Like this: attr=attr.replace("../media/demo.wav",inpt);

Swapnil Pandey Over a year ago

I tried what you told but nothing happens. The audio file once loaded doesn't change.

hmak Over a year ago

So. Try using jquery to remove the audio tag and create a new one. You can do it with javascript too. jqruey makes it easier

Swapnil Pandey Over a year ago

can you please tell me in detail what you meant by that ? actually i'm new to all this!

Marco Mendão · Accepted Answer · 2015-07-08 13:35:38Z

0

Do something like this

<input type="text" id="userInput">
<input type="button" id="button" onclick="loader();" value="do">

<div id="placeholder">**use the value of inpt here**</div>

<script>
function loader()
{
  var inpt = document.getElementById("userInput").value; 
  document.getElementById("placeholder").innerHTML=inpt;  
}
</script>

Try here https://jsfiddle.net/Menda0/e7phd00g/

answered Jul 8, 2015 at 13:35

Marco Mendão

3292 silver badges5 bronze badges

Comments

Mike Willis · Accepted Answer · 2015-07-08 13:59:02Z

There are a few ways you can go about this. Here are some examples.

Regular Javascript: fiddle here: https://jsfiddle.net/onfpg0d6/

<script type="text/javascript">
    function loader() {
        var input = document.getElementById( "userInput" ).value;
        document.getElementById( "result" ).innerHTML = input;
    }
</script>

<input type="text" id="userInput">
<input type="submit" id="submit" onclick="loader();">
<p id="result"></p>

Using jQuery: fiddle here: https://jsfiddle.net/vbbow5ue/

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#submit").click(function(event){
            event.preventDefault();
            jQuery("#result").html( jQuery("#userInput").val() );
        });
    });
</script>

<input type="text" id="userInput">
<input type="submit" id="submit">
<p id="result"></p>

Using AngularJS: fiddle here: https://jsfiddle.net/8LLn3chv/

<div ng-app>
    <input type="text" id="userInput" ng-model="userInput">
    <p>{{userInput}}</p>
</div>

Marco Mendão · Accepted Answer · 2015-07-08 14:30:01Z

0

For your update try something like this.

<input type="text" id="userInput">
<input type="button" id="button" onclick="loader();" value="do">

<div class="list-group" id="playlist">
<a id="thing" href=""
ng-class="{ 'list-group-item': true, active: isPlaying('../media/demo.wav') }"
ng-click="play('../media/demo.wav')">
<i class="glyphicon glyphicon-play"></i>
*song name*
</a>
</div>

<script>
function loader()
{
  var inpt = document.getElementById("userInput").value; 
  document.getElementById("thing").setAttribute("ng-click", "play('"+ inpt+"')");
}
</script>

Jsfiddle here https://jsfiddle.net/Menda0/e7phd00g/

answered Jul 8, 2015 at 14:30

Marco Mendão

3292 silver badges5 bronze badges

Collectives™ on Stack Overflow

Use JavaScript variable in html

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related