在HTML中使用JavaScript变量

Question

我正在创建一个网页，用户可以在其中播放在他输入的URL上找到的音频。

为此，我首先要从用户那里获取输入，将其存储在JavaScript中的变量中，然后需要在HTML中使用输入的URL。

我的JavaScript和html代码：

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

我无法弄清楚如何在html中使用输入网址。 难道我做错了什么 ？

另外，还有什么更好的方法可以做到这一点。

编辑：我实际上是在尝试在此代码中使用输入的URL代替“ /media/demo.wav”：

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

Answer 1

您可以创建一个div并使用JavaScript填充div的HTML。 可能是这样的：

HTML：

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

和JavaScript：

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

更新：

您不应该进行属性替换。 只需将所有代码包装在audioplayer div中，然后像我之前向您展示的那样设置innerHTML即可：

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;

Answer 2

使用此代码：

 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> 

更新资料

要实现您在编辑中所说的内容，可以使用以下代码：

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

Answer 3

做这样的事情

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

在这里尝试https://jsfiddle.net/Menda0/e7phd00g/

Answer 4

有几种方法可以解决此问题。 这里有些例子。

常规Javascript：在这里拨弄： 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>

使用jQuery：在这里拨弄： 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>

使用AngularJS：在这里拨弄： https : //jsfiddle.net/8LLn3chv/

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

Answer 5

对于您的更新，请尝试这样的事情。

<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在这里https://jsfiddle.net/Menda0/e7phd00g/