HTML do zmiennej w JS – jak?

0

Witam, chciałbym przyporządkować część kodu HTML do zmiennej w JS i w potrzebie wyświetlić ją. Nie wiem jak to zrobić. Jakieś pomysły?

pseudokod

var zmienna = [[
// ... zawartość (może zawierać bezpośrednio znaki: <, >, &) ...
      <p>
      <a href="/mylink/article1"><img style="float: left; margin-right: 5px;" height="80" src="/mylink/image" alt=""/></a>
      Author Names
      <br/><em>Date</em>
      <br/>Paragraph of text describing the article to be displayed</p>
]];
document.writeln(zmienna);

2

Skoezystaj z interpolacji stringa.
Nawet nie pytam po co tam masz tablice tablic.

2
const myHtml = `<div>Some <strong>lorem ipsum</strong> text</div>`;
...
document.querySelector('.myEl').innerHTML = myHtml;
0

Znaki tablic były jako pseudo kod, nie miała nic wspólnego z rzeczywistością. Pojawił mi się kolejny problem. Strona działa joko get z pobieraniem zmiennych do php i wykonuje dwa razy skrypt php nie wiem dlaczego.

pseudokod
<script>
if window.innerWidth <= 700) {
const zm_Html = 
`
  <div id="main">
   <div id="main_info1">
   <div><?php require('skrypt.php'); ?></div>
   </div>
`;
document.writeln(zm_Html);
} else {
const zm_Html = 
  <div id="main">
   <div id="main_info1">
   <div><?php require('skrypt.php'); ?></div>
   </div>
`;
document.writeln(zm_Html);
}
</script> 


Skrypt w php zrobiony dla testu odczytuje zmienną z pliku txt, dodaje jeden i zapisuje do pliku. Przed odświeżeniem strony w pliku jest wartość 1, po odświeżeniu strony w pliku jest wartość 3. Strona wyświetlona jeden raz w przeglądarce, skrypt php wykonany 2x. Dlaczego? Po wykasowaniu jednej części np po else {}, skrypt php ma wartość poprawną.

0

Nie znam php i nie chcę poznawać, ale jeśli to coś <?php blablabla ?> omija interpolację w stylu skryptu poniżej, to masz odpowiedź

const zm4_Html = 
`
  <div id="main">
   <div id="main_info1">
   <div>${console.log('Wykonam się zaraz po załadowaniu skryptu')}></div>
   </div>
`;
1

Po co w ogóle jest ten warunek, skoro w obu wypadkach zmienna zm_Html przyjmuje taką samą wartość?

Przy warunku brakuje wiodącego (.
Przy drugiej deklaracji zm_Html brakuje wiodącego ` więc cały kod jest błędny. Otwórz konsolę przeglądarki i zobacz informacje o błędach.

Ogólnym efektem wykonania document.writeln(zm_Html); będzie tu zawsze niepoprawna strona html bez nagłówka itp.

Pomijając powyższe błędy, skrypt powinien wykonać się tylko raz.

0

Przed warunkiem brakuje ( i wiodącego ` z racji pośpiechu pisania na forum. W skrypcie na stronie jest poprawnie, bez takich znaków wiadome, że wysypałby się. Kod, który tu wklejam jest krótkim wycinkiem modyfikowanym na potrzeby przekazu. Docelowo posiada wszelkie znaczniki html, czcionki czy inne style jak i więcej php. Dlatego nie było sensu wklejać np. 300 linijek aby poprosić Was o pomoc w konkretnym problemie. Dziękuje jednak za wytyczne, docelowo chciałbym poprzez JS i funkcje wykrycia rozdzielczości obrócić kolejność paru boxów. Stylami oczywiście popracować nad poprawnym, estetycznym wyświetleniem strony, natomiast parę boxów zależy mi aby na komórce wyświetlony był w innej kolejności np. main_info2 następnie main_info1 na na wyższej rozdzielczości na opak. Dlatego w obu przypadkach faktycznie użyte będą te same pliki PHP natomiast w różnej kolejności przedstawione na WWW. Jednak nadal jest problemem jest podwójne wykonywanie skryptu PHP. Muszę zrobić delikatny kod podobny do przedstawionego powyżej aby upewnić się, że pomimo braku warunku do wykonania skrypt wew i tak jest uruchamiany.

0

Zgodnie z potrzebą napisałem stronę zawierającą minimum do pracy ale wszelkie znaczniki do poprawnego działania są zawarte.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
 </head>
 <body bgcolor="#000000" text="#ffffff">
  <script type="text/javascript">
   var test = 0;
   document.writeln(innerWidth);
   if (window.innerWidth <= 700) {
    document.writeln("mniejszy");
    test = test+1;
    const zm_Html1 = 
`
     <div><p>Niższa rozdzielczość - test</p></div>
     <div><?php require('skrypt1.php'); ?></div>
`;
    document.writeln(zm_Html1);
   } else {
    document.writeln("większy");
    test = test+1;
    const zm_Html2 = 
`
     <div><p>Wyższa rozdzielczoć - test</p></div>
     <div><?php require('skrypt2.php'); ?></div>
`;
    document.writeln(zm_Html2);
   }
   document.writeln(test);        // wynik poprawny równy 1
  </script>  
 </body>
</html>

Jak widać kod zawiera proste rozpoznanie rozdzielczości wewnętrznej okna przeglądarki i przy ładowaniu strony w zwężonej przeglądarce <= 700 odpala skrypt1.php w innym przypadku skrypt2.php.
Skrypty PHP za to ma proste zadanie:

  • wyświetlić info do strony www z tekstem odpowiednio informując czy uruchomiony jest nr1 czy nr2
  • dodać jedną linijkę do pliku info.txt z informacją który skrypt został uruchomiony i godzinę

Problem polega na tym, iż na stronie WWW wynik zmiennej "var test" jest poprawny, wyświetlone informacje ze skryptu PHP adekwatne do uruchomionej rozdzielczości. Natomiast w pliku info.txt widać wyraźnie, że za każdym razem wykonywane jest polecenie zarówno skrypt1.php jak i skrypt2.php. Dlaczego?
Poniżej daje linki do testowo wstawionej strony i wyraźnie widać omawiany problem. Ręcznie klikając w plik skrypt1.php widać dodawanie tylko jednego wiersza czyli PHP działa poprawnie.

Linki:
index.php
skrypt1.php
skrypt2.php
info.txt

Jakieś pomysły co jest nie tak?

1
Aniol83 napisał(a):

Problem polega na tym, iż na stronie WWW wynik zmiennej "var test" jest poprawny, wyświetlone informacje ze skryptu PHP adekwatne do uruchomionej rozdzielczości. Natomiast w pliku info.txt widać wyraźnie, że za każdym razem wykonywane jest polecenie zarówno skrypt1.php jak i skrypt2.php. Dlaczego?

Strona jest przetwarzana na serwerze: przed wysłaniem do przeglądarki wykonują się po kolei oba wstawione skrypty, bo takie jest polecenie.

0

Czyli w jaki sposób rozwiązać zaistniały problem?

2

Zależy, co chcesz osiągnąć, bo może trzeba inaczej zbudować stronę.
Możesz zawsze użyć Ajax do pobrania tekstu z serwera i wstawić go na stronę. Chociaż moim zdaniem to wszystko da się wykonać po stronie klienta, bez potrzeby wołania serwera o tekst.

0

Docelowo PHP wykonuje całą pracę na urządzeniu a ewentualne wyniki tej pracy, statystyki, zdjęcia czy tekst są tylko raportem. Zależało mi owe raporty inaczej ustawić jako wyniki na stronie względem różnych rozdzielczości dla przejrzystości.

0

W takim razie można by zrobić program zewnętrzny na serwerze, który by wykonywał te zadania. Skrypt PHP tylko komunikowałby się z tym programem i sprawdzał, czy już są wyniki. A strona u klienta co jakiś czas pobierałaby ten skrypt PHP, by odczytać bieżące wyniki.
No chyba że ten skrypt PHP wykona się szybko, to wtedy nie potrzeba programu zewnętrznego.

1
Aniol83 napisał(a):

docelowo chciałbym poprzez JS i funkcje wykrycia rozdzielczości obrócić kolejność paru boxów.

Sensowniej będzie to zrobić CSS-em:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.w3schools.com/cssref/css3_pr_order.asp

1 użytkowników online, w tym zalogowanych: 0, gości: 1