sup /g/, do any of you know javascript?
I'm trying to make an html button trigger a javascript function but it's not working and I don't get why.
***jquery is also acceptable
<a id="mybutton" class="btn" href="javascript:null;"/>
<script>
document.querySelector("#mybutton").addEventListener("click", function(){
// doSomething();
});
</script>
>>55231022<!DOCTYPE html>
<html>
<head>
<title> OP is a fag </title>
<script>
function doShit(parameters)
{
//do shit here
}
</script>
</head>
<body>
<button onclick="doShit(parameters)">
poke me like you poke dick OP
</button>
</body>
</html>
>>55231059
The fucks up with the href="javascript:null;" thing?
also why are you using querySelector for something that has an ID? Use getElementById
>>55231022
>open the console
>fuck off
You can either have an onclick event that links to the function on the button
<button onclick="function()"> </button>
or add in an event listener<button id="button"> </button>
<script>
var btn = document.getElementById("button");
btn.addEventListener("click", function());
</script>
>>55231059
>>55231211
>>55232199
>typical JavaScript devs
If I were your boss and you show me a code like that, you'll be fired on the spot .
>>55232327
How would you do it then, boss?
>>55232442
Hint:
I won't touch the html. Everything will be done directly from the JS file or script tag (Yes, the function) . If you can't do this, you should stop writing JS
>>55232511
>or add in an event listener
>event listener
Once you've learnt to read, get your head out of your ass, it's case to case dependent. In some cases, an onclick function would serve better.
index.html<button id="button"></button>
index.jswindow.addEventListener('mousemove', checkCursor, false);
function checkCursor(event) {
const btn = document.querySelector('#button');
if (event.buttons === 1) {
if (event.clientX >= btn.offsetLeft && event.clientX <= (btn.offsetLeft+btn.offsetWidth) &&
event.clientY >= btn.offsetTop && event.clientY <= (btn.offsetTop+btn.offsetHeight)) {
doStuff();
}
}
}
function doStuff() {
/* Enter more shit code here */
}
I'll take my CS diploma now
>>55232511
He's just trying to make a suggestion on 4chan fuck off faggot
>>55232511
>make your website not work without javascript enabled
>>55232511
does the js file basically act like a class file in c++? where it's just the function def and you can call it from the linked html file?
>>55232539
I wouldn't call it a class file, you're just putting the JS in its own file and referencing/calling it from the html
>>55232552
what's the proper way to link them? I keep fucking it up somehow
>>55232521
>>55232529
Lol! You don't don't seem to get it , do you? Never put a function call in tags. It's bad practice and shows your ineptitude. What if you have 20 buttons? Will you add the same function call to all 20?
<html>
<body>
</body
</html>
<script>
makeButton();
function makeButton() {
const btn = document.createElement('button');
btn.className = 'myDumbButton';
btn.addEventListener('click', doStuff);
body.appendChild(btn);
}
function doStuff() {
setInterval( () => console.error('kill me'), 1000);
}
</script>
>>55232565
This might help. You should probably read a few more chapters too http://www.w3schools.com/js/js_whereto.asp
>>55232442
ng-click="angularIsAwesome()"
>>55232589
it's not much different to have 20 event listeners than 20 buttons with function calls
>>55232526
fantastic
needsmorejquery.com
You're all terrible javascript
>>55232620
Then why do we've setAttribute?
You're basically repeating yourself and wasting time/money, depending on your environment
>>55232636
jQuery is for losers and people with downs
I thought of a better way<html>
<body>
<body>
<html>
<script>
var script = document.createElement('script');
script.innerHTML = `var btn = document.createElement('button');
btn.setAttribute('onclick', 'doStuff()');
document.body.appendChild(btn);
function doStuff() {
// shit
}`;
document.body.appendChild(script);
</script>
Beat that for asinine ways to do stuff
>>55232609
literally the same thing as onlick="";
but +1 for AngularJS.
>>55231211
>onclick=
for dumbs like you JS is misunderstand and hated.
>>55232907
>JS is misunderstand
Found you guy
>>55232589
>having 20 buttons on one page
>>55232589
>It's bad practice and shows your ineptitude.
It shows your inflexible and narrow thought process if you think there's only one correct method for everything.
I based my life on anime and JavaScript. Now I own more than a few thousand rupees and live in Pune (Silicon Valley 2.0 for you non poo in loos).
>>55232526
>2016
>Not using Kawaii.js゚ω゚ノ= /`m´)ノ ~┻━┻ //*´∇`*/ ['_']; o=(゚ー゚) =_=3; c=(゚Θ゚) =(゚ー゚)-(゚ー゚); (゚Д゚) =(゚Θ゚)= (o^_^o)/ (o^_^o);(゚Д゚)={゚Θ゚: '_' ,゚ω゚ノ : ((゚ω゚ノ==3) +'_') [゚Θ゚] ,゚ー゚ノ :(゚ω゚ノ+ '_')[o^_^o -(゚Θ゚)] ,゚Д゚ノ:((゚ー゚==3) +'_')[゚ー゚] }; (゚Д゚) [゚Θ゚] =((゚ω゚ノ==3) +'_') [c^_^o];(゚Д゚) ['c'] = ((゚Д゚)+'_') [ (゚ー゚)+(゚ー゚)-(゚Θ゚) ];(゚Д゚) ['o'] = ((゚Д゚)+'_') [゚Θ゚];(゚o゚)=(゚Д゚) ['c']+(゚Д゚) ['o']+(゚ω゚ノ +'_')[゚Θ゚]+ ((゚ω゚ノ==3) +'_') [゚ー゚] + ((゚Д゚) +'_') [(゚ー゚)+(゚ー゚)]+ ((゚ー゚==3) +'_') [゚Θ゚]+((゚ー゚==3) +'_') [(゚ー゚) - (゚Θ゚)]+(゚Д゚) ['c']+((゚Д゚)+'_') [(゚ー゚)+(゚ー゚)]+ (゚Д゚) ['o']+((゚ー゚==3) +'_') [゚Θ゚];(゚Д゚) ['_'] =(o^_^o) [゚o゚] [゚o゚];(゚ε゚)=((゚ー゚==3) +'_') [゚Θ゚]+ (゚Д゚) .゚Д゚ノ+((゚Д゚)+'_') [(゚ー゚) + (゚ー゚)]+((゚ー゚==3) +'_') [o^_^o -゚Θ゚]+((゚ー゚==3) +'_') [゚Θ゚]+ (゚ω゚ノ +'_') [゚Θ゚]; (゚ー゚)+=(゚Θ゚); (゚Д゚)[゚ε゚]='\\'; (゚Д゚).゚Θ゚ノ=(゚Д゚+ ゚ー゚)[o^_^o -(゚Θ゚)];(o゚ー゚o)=(゚ω゚ノ +'_')[c^_^o];(゚Д゚) [゚o゚]='\"';(゚Д゚) ['_'] ( (゚Д゚) ['_'] (゚ε゚+(゚Д゚)[゚o゚]+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+((゚ー゚) + (o^_^o))+ (o^_^o)+ (゚Д゚)[゚o゚]) (゚Θ゚)) ('_');
>>55233081
Is this an actual library? Please elaborate
<button onclick='someFunction()'>
... herp a derp ...
<script>
function someFunction() {
}
</script>
Everything else is more complex than it needs to be. People have lost their way.
>>55233094
Nah, its just JS encoding http://utf-8.jp/public/aaencode.html
There is also jjencode http://utf-8.jp/public/jjencode.html
Step 1 is to install React.
Step 2 is to create a React component.
Step 3 is to add your button.
>>55231022
jQuery is plebshit and Angular is on its way. React master race.
>>55233174
Vue master race.
>>55233174
>>55233179
Polymer is where its at yo
>>55233117
Well if u can have a js switch that does all the job that way u can bind multiple buttons to the same function or just to different ones having all on the same place... something like<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>
.
.
.
<script>
function myFunc(el) {
console.log(el.id);
}
let buttons = document.getElementsByTagName('button');
for (let button of buttons) {
button.onclick = function() {
myFunc(this)
}
}
</script>
>>55233134
holy shit thats pretty funny, how does this work?
Another anon seeking help.
I'm new and I've been trying to do a few things with js, now I want to click those images and show their alt on the"show" id. But I'm can't do it.
>>55233557
give those img's id to add the event listeners but something like this:let show = document.getElementById('show');
let imgs = document.querySelectorAll('img');
for(let img of imgs) {
img.addEventListener('click', function() { show.innerText = img.alt });
}
I think something like that would work
>>55231022
<button onclick='alert("OP == faggot")'>Click This</button>