Использовать переменную JavaScript в html

Question

Я создаю веб-страницу, где пользователь может воспроизводить аудио, найденное на введенном им URL-адресе.

Для этого я сначала беру ввод от пользователя, сохраняя в переменной в JavaScript, а затем должен использовать введенный URL-адрес обратно в свой html.

Мои 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**

Я не могу понять, как использовать ввод URL обратно в HTML. Я делаю что-то неправильно ?

Кроме того, есть ли лучший способ сделать это.

Edit: То, что я на самом деле делаю пытаюсь использовать введенный 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

использовании Этот код:

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

Для достижения того, что вы сказали в своем редактирования, вы можете использовать код ниже:

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 2

Вы можете создать div и для заполнения HTML внутри div использовать JavaScript , Вот что это может выглядеть следующим образом:

HTML:

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

И JavaScript:

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

Update:

Вы не должны делать атрибут замены. Просто обернуть весь код в 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 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

Есть несколько способов, которыми вы можете это поделать. Вот несколько примеров.

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