问题描述
这是一个包含图像和TTS的小网站的代码。
当您点击数字1，2和3时，您应该听到荷兰语音，并且当您用'？'点击3个图像时。
在Firefox中，一切都很好。我听到6个不同的数字，但不是在Chrome中。
在Chrome中，我听到1,2和3，但图像下面的4,5和6不起作用。
正如你在代码中看到的，唯一的区别是添加的图像。
我将脚本保留在底部，以便可以首先加载图像。
我正在搜索小时（天），但没有结果。
<！DOCTYPE html>
< html lang =enxmlns =http://www.w3.org/1999/xhtml>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no>
< title> test< / title>
< script type =text / javascript>
var TextFileName =../../sp_uploader/dagprogramma/test.txt;
< / script>
< link rel =stylesheethref =http://www.w3schools.com/lib/w3.css>
< / head>
< body oncontextmenu =return false;>
< div class =w3-card>< span class =speechid =zin1>< / span>< / div>
< div class =w3-card>< span class =speechid =zin2>< / span>< / div>
< div class =w3-card>< span class =speechid =zin3>< / span>< / div>
< div class =w3-card>< img src =../../ sp_uploader / dagprogramma / leeg.jpgclass =speechid =zin4 >< / DIV>
< div class =w3-card>< img src =../../ sp_uploader / dagprogramma / leeg.jpgclass =speechid =zin5>< / DIV>
< div class =w3-card>< img src =../../ sp_uploader / dagprogramma / leeg.jpgclass =speechid =zin6>< / DIV>
< script src =https://code.responsivevoice.org/responsivevoice.js>< / script>
< script src =../../ sp_js / leesfotoboek.js>< / script>
< / body>
< / html>
以及脚本：
var i;
var SpeechList = document.getElementsByClassName（speech）;
var fnSpeech = function（）{
console.log（this.innerHTML，= innerhtml !!!）;
responsiveVoice.speak（this.innerHTML，'荷兰女'）;
};
for（i = 0; i< SpeechList.length; i ++）{
SpeechList [i] .addEventListener（click，fnSpeech，false）;
}
函数fnHandleText（FileText）{
var TextArray = FileText.split（，）;
console.log（TextArray）;
for（var i = 0; i< TextArray.length-1; i ++）{
document.getElementById（zin+（i + 1））。innerHTML = TextArray [i];
console.log（document.getElementById（zin+（i + 1））。innerHTML = TextArray [i]）;
}
}
var xhttp = new XMLHttpRequest（）;
xhttp.onreadystatechange = function（）{
if（this.readyState == 4&& this.status == 200）{
fnHandleText（this.responseText）;
}
};
xhttp.open（GET，TextFileName，true）;
xhttp.send（）;
正式的img元素不应该有子元素/ html ，所以当你修改innerHTML时的行为是未定义的。
不用向你的元素中添加innerHTML，你可以尝试给每个元素添加一个数据属性：
var fnSpeech = function（）{
responsiveVoice.speak（this.getAttribute（'data-speech-text'），'Dutch Female ）;
};
for（i = 0; i< SpeechList.length; i ++）{
SpeechList [i] .addEventListener（click，fnSpeech，false）;
}
函数fnHandleText（FileText）{
var TextArray = FileText.split（，）;
console.log（TextArray）;
for（var i = 0; i< TextArray.length; i ++）{
//设置非img元素的文本
document.getElementById（zin+（i + 1））。innerHTML = i + 1
document.getElementById（zin+（i + 1））。setAttribute（'data-speech-text'，TextArray [i]）;
$ / code $ / pre
$ hr
我做了一些编辑，使我的代码更加兼容你的
这是一个This is code for a little website with images and TTS.
When you click on the number 1, 2 and 3 you should hear a dutch voice and also when you click on the 3 images with a '?'.
In Firefox, everything is ok. I hear 6 different numbers but not in Chrome.
In Chrome I hear 1, 2, and 3 but the 4, 5 and 6 under the images don't work.
As you can see in the code, the only difference is the image added.
I keep the scripts at the bottom so the images can load first.
I am searching for hours (days) but no result.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<script type="text/javascript">
var TextFileName = "../../sp_uploader/dagprogramma/test.txt";
</script>
<link rel="stylesheet" target="_blank" lml-data-x="https://www.lmlphp.com/r?x=CtQ9yf-Vsi2i2jwioiIGCebVzto6PMbdsMn3PNbiojwGyiIu5fYw">
</head>
<body oncontextmenu="return false;">
<div class="w3-card"><span class="speech" id="zin1"></span></div>
<div class="w3-card"><span class="speech" id="zin2"></span></div>
<div class="w3-card"><span class="speech" id="zin3"></span></div>
<div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin4"></div>
<div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin5"></div>
<div class="w3-card"><img src="../../sp_uploader/dagprogramma/leeg.jpg" class="speech" id="zin6"></div>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script src="../../sp_js/leesfotoboek.js"></script>
</body>
</html>
and here the script:
var i;
var SpeechList = document.getElementsByClassName("speech");
var fnSpeech = function () {
console.log(this.innerHTML, " = innerhtml !!!");
responsiveVoice.speak(this.innerHTML, 'Dutch Female');
};
for (i = 0; i < SpeechList.length; i++) {
SpeechList[i].addEventListener("click", fnSpeech, false);
}
function fnHandleText(FileText) {
var TextArray = FileText.split(",");
console.log(TextArray);
for (var i = 0; i < TextArray.length-1; i++) {
document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i];
console.log(document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i]);
}
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
fnHandleText(this.responseText);
}
};
xhttp.open("GET", TextFileName, true);
xhttp.send();
解决方案 Officially an img element should not have child elements/html, so the behavior when you modify the innerHTML is undefined.
Instead of adding innerHTML to your elements, you could try adding a data attribute to each:
var fnSpeech = function () {
responsiveVoice.speak(this.getAttribute('data-speech-text'), 'Dutch Female');
};
for (i = 0; i < SpeechList.length; i++) {
SpeechList[i].addEventListener("click", fnSpeech, false);
}
function fnHandleText(FileText) {
var TextArray = FileText.split(",");
console.log(TextArray);
for (var i = 0; i < TextArray.length; i++) {
// Set the text for non-img elements
document.getElementById("zin" + (i + 1)).innerHTML = i + 1
document.getElementById("zin" + (i + 1)).setAttribute('data-speech-text', TextArray[i]);
}
}
I made a couple edits to make my suggested code more compatible with yours
Here is a jsFiddle to show the functionality
这篇关于Firefox和Chrome中文本到语音的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！