Событие onClick

@carl3133 · Регистрация: 22.11.2015

Передо мной стоит задача, суть которой заключается в том, чтобы при нажатии на ссылку в левом столбце - в правом столбце должно появится расписание. Как сделать появление фотографии, я могу, а вот как добавить в правый столбец по нажатию на ссылку текст - не знаю
Помогите разобраться с этим

HTML5

<html>
<head>
    <title>Расписание</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="script.js"></script>
</head>
<body>
    <table class="table">
        <tr>
            <th>
                Дни недели
            </th>
            <th>
                Расписание
            </th>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="ChangeImage('1.1')">Понедельник</a>
            </td>
            <td rowspan="5">
                <img id="foto" src="2.png">
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="ChangeImage('1.2')">Вторник</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="ChangeImage('1.3')">Среда</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="ChangeImage('1.4')">Пятница</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" onclick="ChangeImage('1.5')">Суббота</a>
            </td>
        </tr>
    </table>
</body>
</html>

Javascript

function ChangeImage(photo_name)
{
    document.getElementById('foto').src = photo_name + ".png";
}

CSS

table,tr,th,td {
    border: 2px solid black;
    border-collapse: collapse;
    width: 450px;
    margin-left: 350px;
    margin-top: 200px;
}
td {
    padding-left: 10px;
    padding-right: 10px;
}
a{
    text-decoration: none;
    color: blue;
}
a:hover{
    color:red;
}
img {
    width: 550px;
    height: 300px;
    border: white;
}
.table {
    height: 300px;
}

@Lockground · 25.06.2018, 22:22

через .innerHTML

@Omion · 26.06.2018, 15:05

Когда нужно вставить только текст без тегов используй textContent. innerHTML хитёр.
document.querySelector('h1').textContent = 'Вопрос решен?'

@Lockground 0 / 0 / 1 Регистрация: 12.12.2016 Сообщений: 32
	25.06.2018, 22:22	2
	через .innerHTML 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 351
	26.06.2018, 15:05	3
	Когда нужно вставить только текст без тегов используй textContent. innerHTML хитёр. document.querySelector('h1').textContent = 'Вопрос решен?' 0

Опции темы