Thread replies: 47
Thread images: 12
Thread images: 12
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>
>>
File: 1388562866514.jpg (108KB, 788x444px) Image search:
[Google]
108KB, 788x444px
>>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 .
>>
File: High-Quality-Casting-Fast-Sinking-Hard-Fishing-Lure-Pencil-Bait-Pesca-Artificial-5pcs-lot-12g-8cm.jpg (104KB, 800x800px) Image search:
[Google]
104KB, 800x800px
>>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
>>
File: 1456270802167.png (230KB, 640x360px) Image search:
[Google]
230KB, 640x360px
>>55232636
jQuery is for losers and people with downs
>>
File: 1447279278611.gif (73KB, 600x563px) Image search:
[Google]
73KB, 600x563px
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.
>>
File: savaaj.jpg (10KB, 276x270px) Image search:
[Google]
10KB, 276x270px
>>55232907
>JS is misunderstand
Found you guy
>>
File: LOLATYOURLIFE_zpsfdd86388.png (189KB, 450x472px) Image search:
[Google]
189KB, 450x472px
>>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.
>>
File: indian cuisine.jpg (27KB, 600x338px) Image search:
[Google]
27KB, 600x338px
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ﾟ]) (ﾟΘﾟ)) ('_');
>>
File: 1449115993767.png (328KB, 651x431px) Image search:
[Google]
328KB, 651x431px
>>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>
Thread posts: 47
Thread images: 12
Thread images: 12