Question

设置时，我最初没有注意到第三个var声明的方法调用不正确。这个页面按照我的意愿运作，一切都很顺利。

后来我注意到检查员发现了一个错误。我拿出违规行，一切都应该好 - 但剧本不再适用了。奇怪。所以我修复了它并将getElementId('close')更改为正确的getElementById('close')，整个脚本仍然不起作用。

这表示脚本需要损坏的组件才能正常运行。

请注意，不再起作用的部分是openModal()。 audio.setAttribute()和audio.play()位于同一个区块中，仍可正常运行，因此效果很好。我实际上并不需要var close，因为closeFunc()会自动调用onclick。

我的HTML：

    <div id='myModal' class='modal'>
        <div id='modal-content'>
            <span onclick='closeFunc()' id='close'>close x</span>
            <object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
        </div>
    </div>

    <div class='aud'>
        <audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
        <p id='audio-metadata'></p>
    </div>

    . . . 

    <li><a href='#0' class='title'>Sassthefrass <i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'></i> <i onclick='openModal(), sass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'></i></a>
    </li>

和javascript

<script defer async>

var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementId('close');
var pdf = document.getElementById('pdf-enter');

function openModal() {
    modal.style.display = "block";
}    

function sass() {
    pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
    here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}

function closeFunc() {
modal.style.display = "none";
}
</script>

正确工作后，点击pdf FA图标会打开一个带有显示乐谱的pdf的模态。如果代码“没有错误”，则不再执行此操作。

这是一个简化版本，但您可以在cortlandmahoney.com/pages/comp/acoustic.html查看整个内容。请注意该网站仍处于开发阶段，但已接近完成。

Answer 1

Close未定义为ID。你必须定义为'close x' 在您的JavaScript中，您可以分配以下功能：

document.getElementById('foo').onclick=function(){
alert("You have clicked close");
};

我查看了您的网站链接，还有一个关于jquery的例外情况。在jquery中，你必须定义为$('#id').onclick()函数来分配onclick函数。

Answer 2

通过一些修改，您的代码在我的最终工作正常。除非我不了解你。

<div id='myModal' class='modal'>
    <div id='modal-content'>
        <span onclick='closeFunc()'>close x</span>
        <object id='pdf-enter' data='' type='application/pdf'><p id='fallback-text'>Your browser does not support this media. You can download it <a id='dl-link' href=''>here.</p></a></object>
    </div>
</div>

<div class='aud'>
    <audio id='paudio' src='../../music/Available Now.mp3' controls='controls' preload="metadata">Your browser does not support the <code>audio</code>element.</audio>
    <p id='audio-metadata'></p>
</div>

. . . 

<li><i onclick='audiosass()' class="fa fa-play-circle-o fa-fw" aria-label='Listen to music.'>audiosass</i> <i onclick='openModal(), audiosass()' class='fa fa-file-pdf-o fa-fw' aria-label='View the sheet music.'>open</i>
</li>

<script defer async>

var modal = document.getElementById('myModal');
var here = document.getElementById('dl-link');
var close = document.getElementById('close');
var pdf = document.getElementById('pdf-enter');

function openModal() {
    modal.style.display = "block";
}    

function audiosass() {
    pdf.setAttribute('data', '../../scores/Sassthefrass Perusal.pdf');
    here.setAttribute('href', '../../scores/Sassthefrass Perusal.pdf');
}

function closeFunc() {
    modal.style.display = "none";
}
</script>

如果没有这个损坏的组件，Javascript就无法运行

2 个答案: