How do I use Variables in a pure HTML script (website)?

Question

I have a simple website (pure HTML, CSS and JS), but want to use variables in this site.

Like: onclick="myFunction()" class="dropbtn">**$VARIABLE**

I want the text be variable. So VARIABLE=ABC or VARIABLE=123. This has to be shown in the dropdownbutton.

The same for:
href="index.html">$VARIABLE. Which shows the variable in the reference link.
or
input type="text" placeholder=**$VARIABLE** id="myInput" onkeyup="filterFunction()". Which shows the variable in the button.
or
href="" title=**$VARIABLE** ><img src="image/WhatsApp.jpg" alt="". Which shows the variable in the picture.
And more of this things.
Can not use JSP, because I use a IIS webserver (no servlets).

So, can it be done, can I use variable (like the examples) in my HTML with JavaScript (JS).

Sounds like you need a server side technology. ASP.net works with IIS or [IIS can be configured to server PHP](https://learn.microsoft.com/en-us/iis/application-frameworks/scenario-build-a-php-website-on-iis/configure-a-php-website-on-iis). You can't use variables in HTML as HTML is purely descriptive. You can use javascript to manipulate HTML, but from the sounds of it you will need more than basic javascript variables. — Jon P, Nov 09 '20 at 00:35
read https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes — Mister Jojo, Nov 09 '20 at 00:43
@MisterJojo Data attributes aren't relevant here. He needs to get the data into the HTML in the first place. — Brad, Nov 09 '20 at 01:55
@Brad nope, you can use data attribute in css an pseudo html elements — Mister Jojo, Nov 09 '20 at 02:19
@Mister Jojo, can you give me an example in one of the things I mentioned in my question? Suppose I have an article.data.test = "qwerty'. How can I implement this in href="index.html">$VARIABLE. So that qwerty shows up in the place of $VARIABLE. — Hans van der Rijst, Nov 09 '20 at 02:47
@MisterJojo Agreed, but he isn't able to get the data there in the first place. — Brad, Nov 09 '20 at 03:03
For me, the important question is "where do these variables come from and how are you setting them?" — Jon P, Nov 09 '20 at 03:12
onclick="myFunction()" class="dropbtn">**$VARIABLE**, for example. How do I implement the article,data.test in this. suppose articke.data.test (as mentioned in the link you send, HTML 5) is "qwerty". Do I wrie onclick="myFunction()" class="dropbtn">**$article.data.test**, so I see "qwerty" on my screen in my dropdownbox. — Hans van der Rijst, Nov 09 '20 at 03:53
Do not understand there is no context in your question. For instance: onclick="myFunction()" class="dropbtn">$VARIABLE, for example. How do I implement the article,data.test in this. suppose article.dataset.test (as mentioned in the link you send, HTML 5) is "qwerty". Do I write onclick="myFunction()" class="dropbtn">**$article.dataset.test**, so I see "qwerty" on my screen in my dropdownbox — Hans van der Rijst, Nov 09 '20 at 04:03
you mean POST variables (in the URL ) ? -> https://stackoverflow.com/questions/1961069/getting-value-get-or-post-variable-using-javascript — Mister Jojo, Nov 09 '20 at 04:07
In the link you send me, there is and example of variables. like: article.dataset.parent = 'vehicles'; Now I have a button like: onclick="myFunction()" class="dropbtn">$VARIABLE. On the place @VARIABLE, I want to use this article.dataset.parent, which shoes verhicles (or whatever). How do I do this? Or another exampled: href="" title=**$VARIABLE** > — Hans van der Rijst, Nov 09 '20 at 04:16
you want to send data from page_1 to page_2 using a link (or button) and expect page _2 displays this information? — Mister Jojo, Nov 09 '20 at 04:21
To save some circular arguments: **There are no variables or place holders in HTML**. The closest you get is data attributes. JavaScript can manipulate the Document Object Model (DOM) as displayed by a browser. — Jon P, Nov 09 '20 at 04:50
It also sounds that javasctipt template engines/frameworks might be of assistance to you: https://www.slant.co/topics/51/~best-javascript-templating-engines — Jon P, Nov 09 '20 at 05:03
So I can not display any variable in an html text, like in the first questions I gave as examples? If I make var ABC = "qwerty", I can not display this ABC in the examples I gave? Oke thanks — Hans van der Rijst, Nov 09 '20 at 05:22
No one a good idea? Just a simple variable showing in a title. — Hans van der Rijst, Nov 09 '20 at 09:03
@Misterjojo. Sorry about the miscom. Suppose I have a variable: var $COUNTRY="England". Now I want to see this in for instance a dropdownbox. Like: onclick="myFunction()" class="dropbtn">$COUNTRY. So when I run the page, and I click on the dropdown I see "England". Just want to replace the hardcoded fixed text by a variable. In my example $COUNTRY. just replace fixed text, by a variable, Question is: How do I do it. What is the syntax? Because onclick="myFunction()" class="dropbtn">$COUNTRY, is not working, then I see when I run the page still "$COUNTRY" instead of "England". Thanks — Hans van der Rijst, Nov 10 '20 at 04:20
England , where you write in the example England, France and Spain (not the value, but after that, fixed text, there I want the variable. The $ sign was just to illustrated that it is variable. So — Hans van der Rijst, Nov 10 '20 at 11:39

Mister Jojo · Answer 1 · 2020-11-10T12:17:54.907

0

you mean that ?

const countrySelect = document.getElementsByClassName('dropbtn')[0]

countrySelect.onchange = () =>
  {
  let optElement = countrySelect.querySelector(`option[value="${countrySelect.value}"]`)
  console.clear()
  console.log('selected value = ', countrySelect.value )
  console.log('selected text  = ', optElement.textContent )
  }

<select name="dropbtn" id="ref_dropbtn" class="dropbtn" >
  <option value="" selected disabled>pick one:</option>
  <option value="England">England text</option>
  <option value="France">France text</option>
  <option value="Spain">Spain text</option>
</select>

edited Nov 10 '20 at 12:17

answered Nov 09 '20 at 05:51

Mister Jojo

20,093
6
21
40

No see my examples. Not class, variable – Hans van der Rijst Nov 09 '20 at 09:01
@HansvanderRijst Man, I try to help you, ask yourself why nobody here seem to understand what you're looking for – Mister Jojo Nov 09 '20 at 13:54
Sorry about the miscom. Suppose I have a variable: var $COUNTRY="England". Now I want to see this in for instance a dropdownbox. Like: onclick="myFunction()" class="dropbtn">$COUNTRY. So when I run the page, and I click on the dropdown I see "England". Just want to replace the hardcoded fixed text by a variable. In my example $COUNTRY. just replace fixed text, by a variable, Question is: How do I do it. What is the syntax? Because onclick="myFunction()" class="dropbtn">$COUNTRY, is not working, then I see when I run the page still "$COUNTRY" instead of "England". Thanks – Hans van der Rijst Nov 10 '20 at 04:22
@HansvanderRijst In witch context does your $COUNTRY variable exist? is it on the server or on the browser / client workstation? why add the $ sign to it?, javascript variables don't need to have this sign, unless you are using jQuery or another JS library like Angular. in other words, what is the context of this variable? what do you call a dropBox? there is no dropBox element in HTML, are you talking about a Select HTML? or is it an HTML reception area for a drag & drop? – Mister Jojo Nov 10 '20 at 10:54
@HansvanderRijst If it's a select, using a click event to change an option doesn't make sense, because every time the user wants to use that select, it will change their option each time. I changed my example by showing you the use of a button – Mister Jojo Nov 10 '20 at 11:16
@HansvanderRijst referencing an HTML element by its class is ambiguous, classes are made to indicate a css style applicable to multiple HTML elements. wanting to reference only one of them gives an ambiguity of referencing for all those who will reread your code, and will pose problems if your page must evolve, it is better to use the attribute id, which must be unique for each HTML page – Mister Jojo Nov 10 '20 at 11:30
England , where you write in the example England, France and Spain (not the value, but after that, fixed text, there I want the variable. The $ sign was just to illustrated that it is variable. So – Hans van der Rijst Nov 10 '20 at 11:38
@HansvanderRijst changed my code.... – Mister Jojo Nov 10 '20 at 12:18
... Script does not work with copy paste. But On the place where is for instead England text, there I want a variable, like: So I can change the variable or set them and then it will show by running the page. So if I set this variable = "Market", by running the page I see as option "Market" – Hans van der Rijst Nov 11 '20 at 00:39
@HansvanderRijst I really feel like you haven't integrated what an N-tier architecture is. the javascript engine of a browser cannot execute any command on any server – Mister Jojo Nov 11 '20 at 01:35
I'm just a simple webmaker (no pro like you all). In the past I was a 4GL engineer and worked with Delphi, Progress and DataFlex. HTML is another branche I see. I want to thank everyone who tryed to help me. The first answer from @Jon P, was the nearest good answer! Its just not possible in a HTML web page. Need ASP or JSP, but I am too lazy to learn it (according my age). Thanks everyone – Hans van der Rijst Nov 11 '20 at 03:24

How do I use Variables in a pure HTML script (website)?

1 Answers1