Question

我建立了动态笔记栏，以便在我的一款教育游戏中植入。当用户单击select元素的其中一个选项时，将触发该场景。它在Firefox（57）和Explorer（11）上按预期工作，但是当使用Chrome（63）进行测试时，它无法更新/显示注释。控制台日志为空。基本上该函数添加和删除带有超时的CSS类，该超时由动画属性设置。我尽量使它成为可访问的，所以任何额外的笔记都会很精彩！

这是我的剥离代码：

<!doctype html>
<html>
  <head>
    <style>
      #dynamicNote { visibility: hidden; opacity: 1;}
      .show { visibility: visible!important; -webkit-animation: fadein  0.5s, fadeout 0.5s 2s; animation: fadein 0.5s, fadeout 0.5s 2s; }
      @-webkit-keyframes fadein { 
        from { opacity: 0; } 
        to { opacity: 1; }
      }
      @keyframes fadein {
        from { opacity: 0; }  
        to { opacity: 1; }
      }
      @-webkit-keyframes fadeout {
        from { opacity: 1; } 
        to { opacity: 0; }
      }
      @keyframes fadeout {
        from { opacity: 1; } 
        to { opacity: 0; }
      }
    </style>
  </head>
  <body>
    <p id="dynamicNote">dynamic notes bar</p>
    <form>
      <label for="gameLang">Choose Language</label>
      <select name="gameLang" id="gameLang">
        <option value="he" selected="true">Hebrew</option>
        <option value="en" onclick="showNote(note='Note1');">English</option>
        <option value="ar" onclick="showNote(note='Note2');">Arab</option>
        <option value="ru" onclick="showNote(note='Note3');">Rus</option>
      </form>
      <script>
        function showNote(note) { 
        var noteBar = document.getElementById('dynamicNote');
        noteBar.textContent = note.toString();
        noteBar.className = 'show';
        setTimeout(function(){ noteBar.className = noteBar.className.replace('show', ''); }, 3000);
        }
      </script>
    </body>
  </html>

Answer 1

这不是选择的工作原理，你没有结束标记，你的 onchange 事件处理程序在哪里？研究下面的更正......

<select onchange="showNote(this.value);" name="gameLang" id="gameLang">
 <option value="he" selected>Hebrew</option>
 <option value="en">English</option>
 <option value="ar">Arab</option>
 <option value="ru">Rus</option>
</select>

为什么Chrome无法按预期工作？

1 个答案: