How do I make an h1 that always has the text of the value of the variable "x"

Question

So let's say I make a h1, ok?

I want to make it's value always set to... let's say "x".

How do I do this, I've tried with a while true loop, but that just crashes the site.

How is this doable, if it is?

[please don't give me dislikes for no reason, I'm just new here]

Please be clear what do you want to achieve and what you've tried? — DecPK, May 09 '21 at 06:33
When you say `I make a h1` , Are you creating using JS or HTML? — DecPK, May 09 '21 at 06:34
I'm trying to achieve the text of the h1 to be the value of the variable x — Technot, May 09 '21 at 06:40

DecPK · Answer 1 · 2021-05-09T06:53:55.627

0

First of all, you need to define HTML first and then JS, and no need to use while(true). It will go forever, instead run once and replace it as it won't get change in the future.

var x = "Text setted form JS - To this";

function myFunc() {
  document.getElementById("h1").innerHTML = x;
  // or
  // document.getElementById("h1").textContent = x;
}
myFunc();

<h1 id="h1">
  This should change to x forever
</h1>

YOUR CODE AND MISTAKES

<html>
<script> // DEFINING JS FIRST
  var x = ("To this")
  function myFunc() {
    document.getElementById("h1").innerHTML = x; //HERE document.getElementById("h1") will be null
  }
  while (true) { // INFINITE LOOP
    myFunc()
  }
</script>
<h1 id = "h1">
  This should change to x forever
</h1>
</html>

edited May 09 '21 at 06:53

answered May 09 '21 at 06:51

DecPK

24,537
6
26
42

I understand this, but I'm asking this if I were to change it in the future. What would I do then? – Technot May 09 '21 at 06:53
You need to do it with some kind of event then. – DecPK May 09 '21 at 06:54
You can change the text with button `onclick` event – DecPK May 09 '21 at 06:56
So there's no way to permanently set it, right? – Technot May 09 '21 at 06:57
If you are not changing it again then it is permanently set... – DecPK May 09 '21 at 07:04

score 0 · Accepted Answer · answered May 09 '21 at 06:56

If I understand your question right, you want your H1 to always have the value as a variable in your JS. Even when the variable is changed.

For this, you might need certain restrictions on how you create the variable. This answer here Listening for variable changes in JavaScript will be able to help you.

I've modified that a bit with more meaningful variables.

var watchableVariable = {
  originalVal: null,
  valListener: function(val) {},
  set val(val) {
    this.originalVal = val;
    this.valListener(val);
  },
  get val() {
    return this.originalVal;
  },
  registerListener: function(listener) {
    this.valListener = listener;
  }
}

watchableVariable.registerListener(function(val) {
  setH1Val(val);
});

var setH1Val = function(val){
    document.getElementById('the-title').innerText = val;
}

watchableVariable.val = 'Hey!';
setH1Val(watchableVariable.val)
setTimeout(function(){
    watchableVariable.val = 'Hello!';
}, 4000);

and the HTML

<h1 id="the-title"></h1>

Note: Even after this, there is a chance that someone might be able to change the text of the h1 using other JavaScript methods. If you want to avoid that, you might want to look into MutationObserver.

Here is a fiddle to it https://jsfiddle.net/ramanay/9ngLyt6h/ — Green Wizard, May 09 '21 at 06:57
I'm quite new to all of this, so it doesn't make sense yet to me. But thanks for providing a valid answer! — Technot, May 09 '21 at 07:01

score 0 · Answer 3 · answered May 09 '21 at 07:03

0

on html : <h1 id=solve>lorem</h1> on js : var x = document.getElementById("solve").textContent; u can view it console.log(x);

answered May 09 '21 at 07:03

mourshad

21
2

How do I make an h1 that always has the text of the value of the variable "x"

3 Answers3