CODEWITHSUNDEEP
javascripthtml
Chris Topher
Chris Topher

Reputation: 43

innerHTML does not overwrite

Im trying to create a HEX code generator and display it on a heading but the problem is it doesnt overwrite the text inside the heading instead it only placed adjacent to it.

let hexGenerator = {
	result: '',
	characters: 'ABCDEF0123456789',
	hexColor: function() {
		for (let i = 0; i < 6; i++) {
			this.result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
		}
		return this.result;
	}
}

window.onload = () => {
	document.querySelector('button').addEventListener('click', () => {
		document.getElementById('demo').innerHTML = 'HEX VALUE: #' + hexGenerator.hexColor();
	})
}
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Upvotes: 3

Views: 264

Answers (5)

junvar
junvar

Reputation: 11574

element.innerHTML = ... does overwrite.

result += ... does not overwrite.

Thanks for providing a minimum example. Add a this.result = '' will reset the value for each click.

let hexGenerator = {
  result: '',
  characters: 'ABCDEF0123456789',
  hexColor: function() {
    this.result = '';
    for (let i = 0; i < 6; i++) {
      this.result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
    }
    return this.result;
  }
}

window.onload = () => {
  document.querySelector('button').addEventListener('click', () => {
    document.getElementById('demo').innerHTML = 'HEX VALUE: #' + hexGenerator.hexColor();
  })
}
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

That being said, there's no reason to create a hexGenerator object here. You could just use a simple function:

let hexColor = () => {
  let characters = 'ABCDEF0123456789';
  let result = '';
  for (let i = 0; i < 6; i++)
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  return result;
};

window.addEventListener('load', () =>
  document.querySelector('button').addEventListener('click', () =>
    document.getElementById('demo').textContent = 'HEX VALUE: #' + hexColor()));
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Edit:: per comment, here's how you'd do this with classes:

class Generator {
  constructor() {
    this.characters = 'ABCDEF0123456789';
  }

  hexColor() {
    let result = '';
    for (let i = 0; i < 6; i++)
      result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
    return result;
  }
}

let gen = new Generator();

window.addEventListener('load', () =>
    document.querySelector('button').addEventListener('click', () =>
      document.getElementById('demo').textContent = 'HEX VALUE: #' + gen.hexColor()));
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Upvotes: 2

Jesper Martinez
Jesper Martinez

Reputation: 631

This will solve your problem. I have added a <span> element as well as the ID on your header parts.

JS

let hexGenerator = {
    result: '',
    characters: 'ABCDEF0123456789',
    hexColor: function() {
        this.result = '';   // <===== Reset value
        for (let i = 0; i < 6; i++) {
            this.result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
        }
        return this.result;
    }
}

window.onload = () => {
    document.querySelector('button').addEventListener('click', () => {
        document.getElementById('demo').innerHTML = hexGenerator.hexColor();
    })
}

HTML

<body>
  <h1>HEX VALUE: #<span id="demo"></span></h1>
  <button>Click Me!</button>
</body>

Upvotes: 1

mottek
mottek

Reputation: 957

When calling hexGenerator.hexColor();, this.result still holds the value of the function calls before.

Reset this.resultat the beginning of hexGenerator.hexColor(); resolves your issue:

let hexGenerator = {
	result: '',
	characters: 'ABCDEF0123456789',
	hexColor: function() {
        this.result = '';   // <===== Reset value
		for (let i = 0; i < 6; i++) {
			this.result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
		}
		return this.result;
	}
}

window.onload = () => {
	document.querySelector('button').addEventListener('click', () => {
		document.getElementById('demo').innerHTML = 'HEX VALUE: #' + hexGenerator.hexColor();
	})
}
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Upvotes: 1

Carl Edwards
Carl Edwards

Reputation: 14424

You're using compound assignment in your loop for your result value. Instead try creating a new variable within your hexColor function and assign a new value to result using that.

let hexGenerator = {
	result: '',
	characters: 'ABCDEF0123456789',
	hexColor: function() {
    let hex = '';
		for (let i = 0; i < 6; i++) {
			hex += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
		}
    this.result = hex;
		return this.result;
	}
}

window.onload = () => {
	document.querySelector('button').addEventListener('click', () => {
		document.getElementById('demo').innerHTML = 'HEX VALUE: #' + hexGenerator.hexColor();
	})
}
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Upvotes: 1

Mechanic
Mechanic

Reputation: 5380

let hexGenerator = {
	result: '',
	characters: 'ABCDEF0123456789',
	hexColor: function() {
        this.result = "";
		for (let i = 0; i < 6; i++) {
			this.result += this.characters.charAt(Math.floor(Math.random() * this.characters.length));
		}
		return this.result;
	}
}

window.onload = () => {
	document.querySelector('button').addEventListener('click', () => {
		document.getElementById('demo').innerHTML = 'HEX VALUE: #' + hexGenerator.hexColor();
	})
}
<body>
  <h1 id="demo">HEX VALUE: #</h1>
  <button>Click Me!</button>
</body>

Upvotes: 1

Related Questions