0

Пусть есть базовый HTMl-файл. Допустим, что я хочу загрузить разные картинки на страницу в зависимости от переменной TITLE.

<!DOCTYPE html>
<script defer src="./staticJS"></script>
<body>
    <h1>{{.Title}}</h1>
{{ if .Title == "Picture1" }}
<img src="1.jpg">
{{ end }}
{{ if .Title == "Picture2" }}
<img src="2.jpg">
{{ end }}
    <button onclick="" >
        How to change title here onclick?
    </button>
</body>
</html>

Приложение - стандартное

func CreateWebApp() {

    engine := html.New("./fiber_templates/views", ".html")
    app := fiber.New(fiber.Config{
        Views: engine,
    })
    app.Static("/staticJS", "./fiber_templates/views/main.js")
    app.Static("/1.jpg", "./fiber_templates/views/1.jpg")
    app.Static("/2.jpg", "./fiber_templates/views/2.jpg")
    app.Get("/", func(c *fiber.Ctx) error {
        // Render index template
        return c.Render("index", fiber.Map{
            "Title": "Picture1",
        })
    })

    log.Fatal(app.Listen(":3000"))
}

Как задать возможность изменения переменной внутри html-страницы в зависимости от внутренних сигналов (button.onclick в данном случае)?

3
  • Добавьте скрипт, который будет обрабатывать нажатия на кнопки.
    – Pak Uula
    21 янв 2023 в 5:52
  • Я это понимаю, но переменная Title, если ее создать в JS - будет отличаться от серверной, что в данном случае меня не устраивает. Меня интересует именно то - как изменить значение серверной переменной на клиентской стороне без перезагрузки страниц и дополнительных запросов. Варианты {{ .Title = "newString" }}, {{ .Title }} = "newString" - выдают ошибку поиска переменной в js.
    – ar rr
    21 янв 2023 в 9:27
  • 2
    Как сервер узнает, что что-то изменилось у клиента? Только через запрос. Если вы хотите обновить переменную в сервере, нужно предусмотреть соответствующий API и сделать AJAX запрос PUT или POST c новым значением. Иначе никак
    – Pak Uula
    21 янв 2023 в 9:33

1 ответ 1

0

Чтобы изменять переменную внутри HTML-страницы в зависимости от внутренних сигналов, вам нужно использовать JavaScript. Вы можете назначить функцию на onclick событие кнопки, которая будет менять значение переменной и обновлять содержимое страницы с помощью DOM-манипуляций. Например, следующий код в main.js будет изменять заголовок и картинку при нажатии кнопки:

const button = document.querySelector('button');
button.addEventListener('click', () => {
    const title = document.querySelector('h1');
    const image = document.querySelector('img');
    if (title.innerText === "Picture1") {
        title.innerText = "Picture2";
        image.src = "/2.jpg";
    } else {
        title.innerText = "Picture1";
        image.src = "/1.jpg";
    }
});

Важно отметить, что в данном случае изменение переменной происходит только на клиентской стороне, а не на серверной стороне, и при обновлении страницы значение переменной будет возвращаться к исходному.

Если вам нужно изменить значение переменной на серверной стороне, то вам необходимо использовать комбинацию JavaScript и AJAX-запросов к серверу. При нажатии кнопки, JavaScript может отправить AJAX-запрос на сервер с измененным значением переменной, а сервер, получив запрос, может обновить значение переменной и вернуть новое содержимое страницы для отображения на клиентской стороне. Например, вы можете использовать JavaScript для отправки POST-запроса на сервер при нажатии кнопки, и на сервере обработать этот запрос, обновив значение переменной и отправив новое содержимое страницы в ответ.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.