如何在Javascript中單擊按鈕后插入元素變量並顯示它？

Question

我有兩個變量是： contentSource和selectedValue 。 我要單擊“ Get Audio ”按鈕，它將獲取兩個變量的值並插入audio元素。 獲得音頻成功后，元素audio將出現。

音頻元素的結構類似於： https ://www.bing.com/tspeak ? &format=audio%2Fmp3&language= selectedValue ＆IID = translator.5034.2＆text = contentSource

我的示例代碼如下所示：

 <script> function getContentTranslate() { var contentSource = document.getElementById('langSource').value; var selectedValue = document.getElementById("langSelect").value; } </script>

  <select id="langSelect"> <option value="en">English</option> <option value="vi">Vietnamese</option> </select> <br> <textarea id="langSource" placeholder="Enter text or webpage URL here" maxlength="5001" aria-label="Text to be translated"style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 48px; font-size: 40px; transition: none 0s ease 0s;"></textarea> <br> <button onclick="getContentTranslate()">GET AUDIO</button> <br> <audio controls autoplay> <source src="https://www.bing.com/tspeak?&format=audio%2Fmp3&language=en&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2&text=This is the content" type="audio/mpeg"> </audio>

Answer 1

這可行。 嘗試:) Codepen： https ://codepen.io/anon/pen/pVVYOV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function getContentTranslate() {
            var contentSource = document.getElementById('langSource').value;
            var selectedValue = document.getElementById("langSelect").value;

                var sound      = document.getElementById("audio-player") || document.createElement('audio');
                sound.id       = 'audio-player';
                sound.controls = 'controls';
                sound.src      = 'https://www.bing.com/tspeak?&format=audio%2Fmp3&language='+selectedValue+'&IID=translator.5034.2&text='+contentSource;
                sound.type     = 'audio/mpeg';
                document.getElementById("audio-player") || document.getElementById('song').appendChild(sound);

        }
    </script>
     <select id="langSelect">
      <option value="en">English</option>
      <option value="vi">Vietnamese</option>
    </select> <br>
    <textarea id="langSource" placeholder="Enter text or webpage URL here" maxlength="5001" aria-label="Text to be translated"style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 48px; font-size: 40px; transition: none 0s ease 0s;"></textarea> <br>
    <button onclick="getContentTranslate()">GET AUDIO</button> <br>
<div id='song'></div>
</body>
</html>

Answer 2

這是我的方法：

 // When the DOM (basically the HTML) is loaded document.addEventListener('DOMContentLoaded', function(){ // Define your DOM elements var getAudioBtn = document.getElementById('getAudioBtn'), langSelect = document.getElementById("langSelect"), langSource = document.getElementById("langSource"), audioEl = document.getElementById('audioEl'); // Setup an event listener on the button getAudioBtn.addEventListener('click', getContentTranslate); // Declare your function function getContentTranslate() { // Get the values var text = langSource.value, language = langSelect.value; // Encode your values for use in a URL query String var url = 'https://www.bing.com/tspeak?&format=audio%2Fmp3' + '&language=' + encodeURIComponent(language) + '&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2' + '&text=' + encodeURIComponent(text); // Set the URL as source for the audio element audioEl.setAttribute('src', url); } });

 <select id="langSelect"> <option value="en">English</option> <option value="vi">Vietnamese</option> </select> <br> <textarea id="langSource" placeholder="Enter text or webpage URL here">Don't worry, be happy!</textarea> <br> <button id="getAudioBtn">GET AUDIO</button> <br> <audio id="audioEl" autoplay controls></audio>

如何在Javascript中單擊按鈕后插入元素變量並顯示它？

問題描述

2 個解決方案

解決方案1
1 已采納 2018-05-12 08:57:21

解決方案2
1 2018-05-12 08:59:41

如何在Javascript中單擊按鈕后插入元素變量並顯示它？

問題描述

2 個解決方案

解決方案1 1 已采納 2018-05-12 08:57:21

解決方案2 1 2018-05-12 08:59:41

解決方案1
1 已采納 2018-05-12 08:57:21

解決方案2
1 2018-05-12 08:59:41