JavaScript功能开关功能不工作

Question

我最近发布了一个问题并建议将此作为答案，但它不起作用。为什么？

<div class="text-center">           
    <embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>

<div class="button">
    <button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

<script>
function switchPdf() {
    var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
        fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
        elem = document.getElementById('thePdf');

    elem.src = elem.src == fileA ? fileB : fileA;
}
</script>

基本上有一个默认的 PDF 在打开的页面上加载，一旦我单击按钮，我希望 pdf 更改为另一个 pdf。但它不起作用

Answer 1

更改 src 属性 <embed>、<object> 等...
不影响

必须用新元素替换

function switchPdf() {
    var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
        fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
        container = document.getElementById('thePdfContainer'),
        elem = document.getElementById('thePdf');

    var newFile = (elem.src === fileA) ? fileB : fileA;
  
    container.innerHTML = '<embed src="' + newFile + '" width="300" height="300" type="application/pdf" id="thePdf">';

    console.log(container.innerHTML);
}

<div id="thePdfContainer" class="text-center">           
    <embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>

<div class="button">
    <button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

JavaScript功能开关功能不工作

JavaScript Function Switch Function Not Working

javascript

embed