Touch do not work typeError line 13

Question

Why I can't move around my player object?
https://code.sololearn.com/WkdmVbttRJMw/?ref=app

Answer 1

You #output works but has zero height, so there's nothing to paint ^^
All your #output content (the 3 divs with class .output1-3) have position fixed: this remove the element from the main flow, and don't keep space for it. Then the #output div is considered empty, and it's normal behavior is to auto-size its heigth according to its content.

Set an explicit height (not percentages as you didn't have a valid parent to compute a relative height), let you see the div color ;)

The second question is less obvious. As your 3 boxes are fixed, you cannot center them by a simple way...

Tricky way is to add to each of these div 2 css properties:

left:50%;
transform:translateX(-50%);

(+ copy of 2nd, with vendors prefix to support some outdated engines -- at least -webkit-transform:...)

The 'normal' way, requires that you remove the position fixed from the boxes and add them display inline-block, give it a container (or use the #output if that fit to you), set it position fixed and text-align center.

Answer 2

You have many debug work to do, but the first step is to enclose all your js tab code inside a function assigned to the window.onload event handler attribute:

onload = function() {
// your code
};

Else your code run before the document was accessible for JS...

Answer 3

Yes, that's what I was warning you: you have many errors to correct... too many for explaining step by step each one, and too many to correct the whole for you, as that would be as if we wrote it entirely for you ;P

Stay patient, try to figure by yourself what cause each problem at a time (if error, read carefully the message, if unexpected behavior debug...). And when you're stuck at a specific problem, request for help in the Q&A after first searching in the Q&A and google ;)

Answer 4

You should start with less ambitious project: touch events aren't an easy field ;)

However, maybe this code could help you to dive deeper into this mess:

https://code.sololearn.com/WO8wrPV40Fzn/?ref=app

Answer 5

How to fix that? I put everything in JavaScript inside onload { } but still do not work..

uncaught reference error line 32. e is not defined

https://code.sololearn.com/WkdmVbttRJMw/?ref=app

Answer 6

Ehh then this code is too hard, don't get it how to learn these steps.. this JavaScript course don't teach enaugh..

Answer 7

Could you please tell me why my #output background-color do not work and how do I get my JavaScript code done??

const click = (on a drink???) {
transfer the selected drink in
.output1
the same for 2 and 3 drink;
if selected drink === 3 & is hot

console.log("you selected hot drinks!!!!")

elif selected drink === 3 & is hot

console.log("cold drinks selected")

else: selected drink === mixture
console log("mixtureeee")
}

https://code.sololearn.com/WSMG536eZ0Cg/?ref=app

Answer 8

When I put inline block display for outputs they are not bottom and the background colour now is longer than my border
https://code.sololearn.com/WN0Z5jOIo5kH/?ref=app

Answer 9

What's the purpose of your #output (grey boxe)? is it intended to be the background of your 3 black border boxes?

Answer 10

Well I figured it out, can you please help me about JavaScript? It's not code in javascript language, what I wrote there it's code in English how and j have no idea how to make it work
https://code.sololearn.com/WN0Z5jOIo5kH/?ref=app

Answer 11

I see in your profile that you've completed the JS course... I strongly advice you to redo it from start slowly, taking the time to pravtice and good understanding each concept ^^

I will try to wrote you a tuto based on this JS pseudo-code in the next hours/days... but I don't promise: that's a lot more of work than just write code for you, but in the second case I will confort you to not learn yourself but continue to request for others write code gor you ;P