如何制作一个按钮来阅读 div 的文本

Question

我正在尝试制作一个按钮 "Speak"，它应该基本上读取前一个 div 的文本内容。

例如我有：

<div id="text1">Lorem ipsum</div>
<button id="btn">Speak</button>
<div id="text2">This is the second block</div>
<button id="btn">Speak</button>

并使用这样的javascript代码

<script type="text/javascript">
var btn = document.getElementById('btn');
speechSynthesis.cancel()
var u = new SpeechSynthesisUtterance();
var text_to_read = document.getElementById('step1');
jQuery.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 
if(!jQuery.browser.chrome){
 u.rate = .2;
}
u.text = text_to_read.textContent;

btn.onclick = function () {speechSynthesis.speak(u);};
</script>

现在，不要在这一行中使用 "step1"：var text_to_read = document.getElementById('step1');我需要检索按钮前 div 上的文本。

希望已经足够清楚了。

抱歉我不是 JS 程序员。

Answer 1

$(document).ready(function(){
    $('.btn').click(function(){
            speechSynthesis.cancel()    ;
      var text_to_read = $(this).prev().text();
        var u = new SpeechSynthesisUtterance(text_to_read);
   speechSynthesis.speak(u); if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
     u.rate = .2;
    }
    u.text = text_to_read.textContent;

    });

});


<div id="text1">Lorem ipsum</div>
<button class="btn">Speak</button>
<div id="text2">This is the second block</div>
<button class="btn">Speak</button>

试试这个

已更新

Answer 2

有了jQuery就很简单了：

$(document).ready(function(){
    $('.btn').click(function(){
        alert($(this).prev().text());
    });
});

演示：https://jsfiddle.net/u4wmt9Lf/

注意：我也把重复的ids改成了classes。

编辑：

试试这个纯 JavaScript 版本，它应该适合你：

var buttons = document.getElementsByClassName('btn');
for(var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].onclick = function (e) {
        var prev = e.target.previousElementSibling;
        var text = prev.innerText || prev.textContent;
        alert(text);
    }
}

演示：https://jsfiddle.net/lmgonzalves/u4wmt9Lf/11/

如何制作一个按钮来阅读 div 的文本

how to make a button to read the text of div

javascript

jquery

html

speech-synthesis