Czy mógłby ktoś mi powiedzieć jaka komenda spowoduje że piłka zacznie się renderować na stronie?

Question

var  a = document.getElementById("a");
var  b = document.getElementById("b");
var  a2 = document.getElementById("a2");
var  b2 = document.getElementById("b2");
var isActive = false;
a.addEventListener("click", aZmienna);



function aZmienna() {
    var aText = document.getElementById("a").innerHTML;


var  a = document.getElementById("a");

if (aText == "A") {
    a.innerHTML = "A!";
    a.style.background = "green";
	isActive = true;
    
}
else{
    a.innerHTML = "A";
    a.style.backgroundColor = "red";
	isActive = false;
}
bramkaOR();


}

b.addEventListener("click", bZmienna )
function bZmienna() {
    var aText = document.getElementById("b").innerHTML;


    var  a = document.getElementById("b");

    if (aText == "B") {
        a.innerHTML = "B!";
			isActive = true;
        a.style.background = "green";
    }
    else{
        a.innerHTML = "B";
        a.style.backgroundColor = "red";
		isActive = false;
    }
    bramkaOR();
}

function bramkaOR(){
    if (a.innerHTML == "A!" || b.innerHTML == "B!"){
    
        document.getElementById("wynikOr").innerHTML = "Bramka jest aktywna";
    }
    else{
    
        document.getElementById("wynikOr").innerHTML = "Bramka nie jest aktywna";
    }
}
a2.addEventListener("click", a2Zmienna);

function a2Zmienna() {
    var a2Text = document.getElementById("a2").innerHTML;


var  a2 = document.getElementById("a2");

if (a2Text == "A") {
    a2.innerHTML = "A!";
		isActive = true;
    a2.style.background = "blue";
    
}
else{
    a2.innerHTML = "A";
    a2.style.backgroundColor = "green";
	isActive = false;
}
bramkaAnd();


}

b2.addEventListener("click", b2Zmienna )
function b2Zmienna() {
    var b2Text = document.getElementById("b2").innerHTML;


    var  b2 = document.getElementById("b2");

    if (b2Text == "B") {
        b2.innerHTML = "B!";
			isActive = true;
        b2.style.background = "blue";
    }
    else{
        b2.innerHTML = "B";
        b2.style.backgroundColor = "green";
		isActive = false;
    }
    bramkaAnd();
}

function bramkaAnd(){
    if (a2.innerHTML == "A!" && b2.innerHTML == "B!"){
    
        document.getElementById("wynikAnd").innerHTML = "Bramka jest aktywna";
    }
    else{
    
        document.getElementById("wynikAnd").innerHTML = "Bramka nie jest aktywna";
    }
}


var ball = document.createElement('div');
function createBall() {
	ball.style.width = 10;
	ball.style.heigth = 10;
	ball.style.backgroundColor = black;
	ball.style.right = 10;
	ball.style.top = 10;
	document.body.insertBefore(a , ball);
}
createBall();
while(true) {
	if(isActive) {
		ball.style.top += 1;
	}
}

 

Answer 1

Brakuje htmla, ale przypuszczam, że masz 4 przyciski A,B,A,B oraz 2 pargrafy gdzie wyświetlane są informację o aktywnych bramkach (OR) i (AND).

'Piłka' nie pojawia Ci się na stronie ponieważ:

- jest literówka w ball.style.heigth (powinno być height)

- nie ma zmiennej ball.style.backgroundColor = black (powinno być 'black' w apostrofach lub cudzysłowie)

- brakuje jednostek (+'px')

- w insertBefore() najpierw jest element, który jest dodawany czyli document.body.insertBefore(ball,a); a nie document.body.insertBefore(a,ball);

    function createBall() {
        ball.style.width = 10+'px';
        ball.style.height = 10+'px';
        ball.style.backgroundColor = 'black';
        ball.style.left = 300+'px';
        ball.style.top = 10+'px';
        ball.style.position = 'absolute';
        document.body.insertBefore(ball,a);
    }

Strona zamuli też gdy napotka na pętle nieskończoną, która jest na końcu tzn. while(true) możesz to rozwiązać np przez dodanie funkcji pomocniczej np move i umieszczenie jej później pod warunkami.

    function move(shouldMove) {
        if(shouldMove) {
            ball.style.top = ball.offsetTop + 10 + 'px';
        }
    }

        bramkaOR();
        move(isActive);