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

• javascript
• html
• input

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

5 Answers 5

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;

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

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/Menda0/e7phd00g/

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

Regular Javascript: fiddle here: https://jsfiddle/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/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/8LLn3chv/

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

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/Menda0/e7phd00g/