Question

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

为此，我首先从用户那里获取输入，在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。我做错了吗？

此外，还有更好的方法吗？

修改我实际上在尝试使用输入的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/

在html

5 个答案: