Change text of a div by if statement Javascript

Question

I'm not really skilled with javascript and I want to add text to a div when a variabel is 1 or 0. I'm not sure if a function is necessary. I'm trying it like this:

var alertt = document.getElementById('Alert');

if(:="OUT_MachineActive": == 1) // Value that gives 1 or 0 
{
    alertt.style.backgroundColor = 'green';
    alertt.firstChild.data = "NO ERROR";
}
if(:="OUT_MachineActive": == 0)
{
    alertt.style.backgroundColor = 'red';
    alertt.firstChild.data = "ERROR!!! Shredder1 is off!";
}


</script>

the div

It's working but the text, I would like to have the text "Shredder1 is off!" on the 2nd line. Like this: ERROR!!!!
Shredder1 is off!

I already tried something like:

  alertt.firstChild.data = "ERROR!!!" + <br /> + "Shredder1 is off!";

But that isn't working.

If you need to change the entire HTML of the div, then you may want to use .innerHTML instead of .data. Using innerHTML will correctly interprete the "<br />". — briosheje
– briosheje, Commented Mar 9, 2015 at 9:17

Prathik Rajendran M · Accepted Answer · 2015-03-09 09:11:18Z

1

You can use jQuery and do it.

var error = 1;
$showErr = $('#show-error');
if (error === 0) {
  $showErr.css('background-color', 'green');
  $showErr.html('No Error!');
} else {
  $showErr.css('background-color', 'red');
  $showErr.html('Error!<br>Some Text');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-error">
</div>

While using jQuery is optional it would make your development a lot easier.

The line break works here because I am passing it as a html string and that gets inserted into the DOM.

answered Mar 9, 2015 at 9:11

Prathik Rajendran M

1,1628 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bart Over a year ago

Thanks fo the help Prathik! I already had the jquery in. But I didn't use it before. Do you maybe have a tip for a good javascript guide ?

Prathik Rajendran M Over a year ago

Hi Bart, This is a pretty popular source for Javascript developer.mozilla.org/en-US/docs/Web/JavaScript/Guide and you can use learn.jquery.com for jQuery

jifar hunde · Accepted Answer · 2016-02-29 13:32:06Z

0

var error = 1;
$showErr = $('#show-error');
if (error === 0) {
  $showErr.css('background-color', 'green');
  $showErr.html('No Error!');
} else {
  $showErr.css('background-color', 'red');
  $showErr.html('Error!<br>Some Text');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-error">
</div>

answered Feb 29, 2016 at 13:32

jifar hunde

11 bronze badge

Collectives™ on Stack Overflow

Change text of a div by if statement Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related