Обработка функций кнопками

Question

Почему при нажатии любой из кнопок ничего не происходит, в консоли тоже никакого "фидбека". Проверял в нескольких браузерах и вебшторме, ничего не происходит, тут воспроизводится.

            <button type="button" onclick="loadContent('text')">Загрузить текст</button>
            <button type="button" onclick="loadContent('image')">Загрузить изображение</button>
            <button type="button" onclick="loadContent('file')">Загрузить файл</button>

            <div id="content"></div>
        </td>
    </tr>
</table>


<script>
    var textContent = 'условие';
    var imagePath = "img/Screenshot 2023-10-28 234434.png";
    var filePath = "src/html_content.txt";

    function loadContent(type) {
        var contentDiv = document.getElementById('content');
        contentDiv.innerHTML = '';

        switch(type) {
            case 'text':
                contentDiv.innerHTML = textContent;
                break;
            case 'image':
                const img = document.createElement('img');
                img.src = imagePath;
                contentDiv.appendChild(img);
                break;
            case 'file':
                const obj = document.createElement('object');
                obj.data = filePath;
                obj.width = "100%";
                obj.height = "100%";
                contentDiv.appendChild(obj);
                break;
        }
    }
</script>

Answer 1

вы или передавайте event в html: onclick="loadText(event)", либо не вызывайте preventDefault() в функции (а для button он и не нужен)

    <tr>
        <td style="width:50%;
                   height:80%;">
            <button onclick="loadText()">Загрузить текст</button>
            <button onclick="loadImage()">Загрузить изображение</button>
            <button onclick="loadFile()">Загрузить файл</button>

            <div id="content"></div>
        </td>
    </tr>
</table>
<script>
    var textContent = 'условие';
    var imagePath = "img/Screenshot 2023-10-28 234434.png";
    var filePath = "src/html_content.txt";


function loadText() {
    document.getElementById('content').innerHTML = textContent;
}

function loadImage() {
    const img = document.createElement('img');
    img.src = imagePath;
    document.getElementById('content').innerHTML = '';
    document.getElementById('content').appendChild(img);
}

function loadFile() {
    const obj = document.createElement('object');
    obj.data = filePath;
    obj.width = "100%";
    obj.height = "100%";
    document.getElementById('content').innerHTML = '';
    document.getElementById('content').appendChild(obj);
}
</script>
</body>

</html>

БЛОГ НА HUSL

Обработка функций кнопками

Ответы (1 шт):