Display message with while loop if a variable goes lower than zero in Javascript

Change this:

while (health < 0){
    health = 0;
    document.getElementById("demo2").innerHTML = "Game over";
    break;
}

function myFunction() {
    if (health>0){
        health -= Math.floor(Math.random() * 10)+1;
        document.getElementById("hpcount").innerHTML = health;
    }
}

To this:

function myFunction() {
    // if health is above 0, game is still active
    if (health>0){
        // generate a new health value
        health -= Math.floor(Math.random() * 10)+1;

        // check if the game should end
        if (health <= 0) {
            health = 0;
            document.getElementById("demo2").innerHTML = "Game over";
        } else {
            document.getElementById("hpcount").innerHTML = health;
        }
    }
}

While you are learning Javascript, consider getting familiar with jQuery, which simplifies the use of javascript and dealing with cross-browser/device compatibility issues.

It looks like you actually want to write a loop using a named function and setTimeout

var health = 30, // initial health
    logbox = document.getElementById("demo2");

function checkHealth() {
    if (health <= 0) { // dead
        logbox.innerHTML = "Game over";
    } else { // alive
        logbox.innerHTML = "";
    }
    if (true) // set some condition so this doesn't go on forever?
        window.setTimeout(checkHealth, 500); // repeat every 500ms
}

checkHealth(); // start it running

Now when you have some change happen to health, it will be "monitored", but if lots of changes happen under (in this case) 500 ms, the code will only react to how it has ended up after the time has passed

An alternative way is to invoke a callback whenever a function modifies health, which does this check. This means you only check as it's needed, but if you have lots of changes happen in under 1 ms (think thousands or more for a PC) you may end up freezing up the browser until it's completed the functions. You also need to make sure you don't set up an infinite loop.

In this style, you would not modify health directly, but write some API, e.g.

var health = 30, // initial health
    logbox = document.getElementById("demo2");

function checkHealth() {
    // take real care if you want to call `setHealth` or `addHealth` here
    // otherwise you may end up with an infinite loop
    if (health <= 0) { // dead
        logbox.innerHTML = "Game over";
    } else { // alive
        logbox.innerHTML = "";
    }
}

function setHealth(x) {
    health = x;
    checkHealth();
}

function getHealth() {
    return health;
}

// or perhaps even
function addHealth(x) {
    health += x;
    checkHealth();
}

Now to modify health,

var x = getHealth(); // get current
setHealth(x - 3); // make change
// or
addHealth(-3);

You don't need a while loop here at all. There is nothing to loop, you're doing one thing that's triggered by a click.

I took the liberty of rewriting your code to use unobtrusive javascript techniques, not expose globals, and be a bit clearer.

Here it is working

(function() {

var health = 30, 
    hpCountEl = document.getElementById("hpcount")
   ;    
document.querySelector('button').addEventListener('click', subtractHealth);
showHealth();

function showHealth() {
  hpCountEl.textContent = health;  
  if(health === 0)
    document.getElementById('demo2').textContent = "Game Over"
}
function subtractHealth() {
    if (health>0)
        health -= Math.floor(Math.random() * 10)+1;
    if(health <= 0)
      health = 0;
    showHealth()
}

})();

Something else to note - you typically do not want to put strings such as "Game Over" into javascript as it can be difficult to localize if you want to offer multiple language support. Instead you should prefer having a hidden element containing that text on the page, and simply make it visible when you need it.

Your while loop is being called once on initialization, evaluating to false, not being called and then never being called again.

You should move it inside myFunction as a normal if check.

This could be a variable scope problem . Try passing health as a parameter to your function .

function myFunction(health) {
    if (health>0){
        health -= Math.floor(Math.random() * 10)+1;
        document.getElementById("hpcount").innerHTML = health;
    }

I don't think you require a while loop, a simple if and else if check would do in this situation. Since you are only checking to see what the variable health is on click you would only need to check it once per click. Here is a jsfiddle of how I would do this.

  var health = 30;    
    document.getElementById("hpcount").innerHTML = health;

  function myFunction() {
     if(health <= 0) {
       health = 0;
       document.getElementById("demo2").innerHTML = "Game over";
     }
     else if (health>0){
       health -= Math.floor(Math.random() * 10)+1;
       document.getElementById("hpcount").innerHTML = health;
     }
   }