如何在Javascript中插入元素的变量并在单击按钮后显示它？_Javascript

如何在Javascript中插入元素的变量并在单击按钮后显示它？

javascript

如何在Javascript中插入元素的变量并在单击按钮后显示它？,javascript,Javascript,我有两个变量：contentSource和selectedValue。我想单击按钮Get Audio，它将获取两个变量的值并插入到Audio元素中。获得音频成功后，将出现元素audio 音频元素具有如下结构： selectedValue&IID=translator.5034.2&text=contentSource 我的示例代码如下所示：函数getContentTranslate（）{ var contentSource=document.getElementById（'langSou

我有两个变量：

contentSource

和

selectedValue

。我想单击按钮

Get Audio

，它将获取两个变量的值并插入到

Audio

元素中。获得音频成功后，将出现元素

audio

音频元素具有如下结构：

selectedValue

&IID=translator.5034.2&text=

contentSource

我的示例代码如下所示：


函数getContentTranslate（）{
var contentSource=document.getElementById（'langSource'）。值；
var selectedValue=document.getElementById（“langSelect”）.value；
}


英语
越南人




获取音频

这很有效。试试看：）代码笔：


文件
函数getContentTranslate（）{
var contentSource=document.getElementById（'langSource'）。值；
var selectedValue=document.getElementById（“langSelect”）.value；
var sound=document.getElementById（“音频播放器”）| | document.createElement（“音频”）；
sound.id='音频播放器'；
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（“音频播放器”）| document.getElementById（“歌曲”）。appendChild（声音）；
}
英语
越南人




获取音频

这很有效。试试看：）代码笔：


文件
函数getContentTranslate（）{
var contentSource=document.getElementById（'langSource'）。值；
var selectedValue=document.getElementById（“langSelect”）.value；
var sound=document.getElementById（“音频播放器”）| | document.createElement（“音频”）；
sound.id='音频播放器'；
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（“音频播放器”）| document.getElementById（“歌曲”）。appendChild（声音）；
}
英语
越南人




获取音频

以下是我的做法：

//加载DOM（基本上是HTML）时
document.addEventListener（'DOMContentLoaded'，function（）{
//定义DOM元素
var getAudioBtn=document.getElementById（'getAudioBtn'），
langSelect=document.getElementById（“langSelect”），
langSource=document.getElementById（“langSource”），
audioEl=document.getElementById（'audioEl'）；
//在按钮上设置事件侦听器
getAudioBtn.addEventListener（'click'，getContentTranslate）；
//声明您的函数
函数getContentTranslate（）{
//获取值
var text=langSource.value，
语言=langSelect.value；
//对值进行编码，以便在URL查询字符串中使用
var url='1〕https://www.bing.com/tspeak?&format=audio%2Fmp3'
+“&language=”+encodeURIComponent（语言）
+“&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2”
+“&text=”+encodeURIComponent（文本）；
//将URL设置为音频元素的源
setAttribute（'src'，url）；
}
});

英语
越南人


别担心，要快乐！


获取音频


以下是我的做法：

//加载DOM（基本上是HTML）时
document.addEventListener（'DOMContentLoaded'，function（）{
//定义DOM元素
var getAudioBtn=document.getElementById（'getAudioBtn'），
langSelect=document.getElementById（“langSelect”），
langSource=document.getElementById（“langSource”），
audioEl=document.getElementById（'audioEl'）；
//在按钮上设置事件侦听器
getAudioBtn.addEventListener（'click'，getContentTranslate）；
//声明您的函数
函数getContentTranslate（）{
//获取值
var text=langSource.value，
语言=langSelect.value；
//对值进行编码，以便在URL查询字符串中使用
var url='1〕https://www.bing.com/tspeak?&format=audio%2Fmp3'
+“&language=”+encodeURIComponent（语言）
+“&IG=D2CBB80AA6824D9A91B0A5D1074FC4A1&IID=translator.5034.2”
+“&text=”+encodeURIComponent（文本）；
//将URL设置为音频元素的源
setAttribute（'src'，url）；
}
});

英语
越南人


别担心，要快乐！


获取音频


很好。投票赞成第一个答案。投票赞成第一个答案你的答案很完美。但是@Vikdek之前已经被回答过了。我对你的答案投了赞成票。非常感谢。你好@blex。我和Bing翻译有问题。你能帮我吗？我这里的问题是：你的答案非常有效。但是@Vikdek之前已经被回答过了。我对你的答案投了赞成票。非常感谢。你好@blex。我和Bing翻译有问题。你能帮我吗？我的问题是：
<!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>