如何制作一个按钮来读取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

使用 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/

Answer 2

$(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>

试试这个

更新