Scratch

PullJosh · 2012-03-04 14:54:03

I'm making a site for new scratchers. On the page about the scratch website, I want to make it so that they type in their username and it will take them to their page. The way this should work is scratch.mit.edu/users/UsernameHere. When they hit go, it would automatically link (window.location()) to their page.

This is the html:

Code:

<input type="text" id="Username" />
<input type="button" value="GO!" id="go" /><br />

If you think I might have even a little more help, I got nothin'. wink

________________________________________________________________________________

Edit: ...Wow. I got one that works. Thanks nXIII!

Code:

<input id=myStuffUsername type=text placholder=Username>
<a id=myStuffLink href=#>My Stuff</a>
<!-- ... -->
<script>
    document.querySelector('#myStuffLink').addEventListener('click', function () {
        window.location = 'http://scratch.mit.edu/users/' + 
            encodeURIComponent(document.querySelector('#myStuffUsername').value);
    }, false);
</script>

Last edited by PullJosh (2012-03-09 19:27:11)

jvvg · 2012-03-04 14:59:40

You need:

Code:

<input type="button" value="GO!" id="go" onclick="window.location = document.getElementById('Username').value;" /><br />

bobbybee · 2012-03-04 15:17:20

jvvg wrote:

You need:

Code:

<input type="button" value="GO!" id="go" onclick="window.location = document.getElementById('Username').value;" /><br />

Even better:

Code:

<input type="button" value="GO!" id="go" onclick="window.location = "http://scratch.mit.edu/users/" + document.getElementById('Username').value;" /><br />

MathWizz · 2012-03-04 15:34:05

Yo dawg...

Just had to add this.

bobbybee · 2012-03-04 15:44:47

Fine, I'll validate it.

nXIII · 2012-03-04 16:00:20

As MathWizz pointed out, you should pretty much never use inline event handlers; I would recommend something like this:

Code:

<input id=myStuffUsername type=text placholder=Username>
<a id=myStuffLink href=#>My Stuff</a>
<!-- ... -->
<script>
    document.querySelector('#myStuffLink').addEventListener('click', function () {
        window.location = 'http://scratch.mit.edu/users/' + 
            encodeURIComponent(document.querySelector('#myStuffUsername').value);
    }, false);
</script>

jvvg · 2012-03-04 16:21:59

bobbybee wrote:

jvvg wrote:

You need:

Code:

<input type="button" value="GO!" id="go" onclick="window.location = document.getElementById('Username').value;" /><br />

Even better:

Code:

<input type="button" value="GO!" id="go" onclick="window.location = "http://scratch.mit.edu/users/" + document.getElementById('Username').value;" /><br />

Oops, guess I was typing too quickly.

rookwood101 · 2012-03-04 16:29:10

nXIII wrote:

As MathWizz pointed out, you should pretty much never use inline event handlers; I would recommend something like this:

Code:

<input id=myStuffUsername type=text placholder=Username>
<a id=myStuffLink href=#>My Stuff</a>
<!-- ... -->
<script>
    document.querySelector('#myStuffLink').addEventListener('click', function () {
        window.location = 'http://scratch.mit.edu/users/' + 
            encodeURIComponent(document.querySelector('#myStuffUsername').value);
    }, false);
</script>

I was just wondering what the benefits of doing this/cons of using inline event handlers are?

spud2451 · 2012-03-04 16:55:20

here's some code i whipped up that will tell the person what their page url is

Code:

<html>
<head>
<script type="text/javascript">
var username
var url
function get_page(){
    username = document.form1.usernamebox.value;
    url = 'http://scratch.mit.edu/users/' + username ;
    alert("your scratch page is " + url    );
}
</script>
</head>
<body>
<form name="form1">
Scratch Username:<br>
<input type="text" value="userame" name="usernamebox">
<br><br>
<input type="button" value="Get Page!" onclick="get_page();">
</form>
</body>
</html>

jvvg · 2012-03-04 17:35:55

Looks good at first glance.
Although in this case, the form is not necessary. If it's just JS, there is no need for a form.

nXIII · 2012-03-04 19:20:53

rookwood101 wrote:
I was just wondering what the benefits of doing this/cons of using inline event handlers are?

There are a couple of reasons:
- This helps separate the content from the behavior, which helps you write more maintainable and organized code
- HTML is not cached, so inline JS is not cached (my <script> should really have been in a separate .js file)
- As MathWizz pointed out, inline event handlers are really eval() in disguise; this is bad because:
- eval can be a security risk (not really applicable here, but it's a good habit to not use eval unless you really have to)
- eval kills JS engine optimizations, because you're executing unknown code at runtime

jji7skyline · 2012-03-05 00:48:01

You can use PHP and HTML forms.

HTML code

Code:

<form action="navigate.php" method="post">
Enter your username:<input="text" name="username"/>
</form>

PHP code "navigate.php"

Code:

$username = $_POST["username"];
header( 'Location: http://scratch.mit.edu/users/'.$username.' ' ) ;

smile

Last edited by jji7skyline (2012-03-09 01:48:48)

rookwood101 · 2012-03-05 02:49:51

nXIII wrote:
rookwood101 wrote:
I was just wondering what the benefits of doing this/cons of using inline event handlers are?
There are a couple of reasons:
- This helps separate the content from the behavior, which helps you write more maintainable and organized code
- HTML is not cached, so inline JS is not cached (my <script> should really have been in a separate .js file)
- As MathWizz pointed out, inline event handlers are really eval() in disguise; this is bad because:
- eval can be a security risk (not really applicable here, but it's a good habit to not use eval unless you really have to)
- eval kills JS engine optimizations, because you're executing unknown code at runtime

Ah okay, I didn't really think about them being eval, but that makes sense, thanks smile

@jji7skyline it would be <form action='navigate.php' method='post'>

rookwood101 · 2012-03-05 12:07:56

PullJosh wrote:
CSS STARTS HERE...

?

rookwood101 · 2012-03-08 16:32:20

PullJosh wrote:
*Knocking*... "Anyone home?"...

You can't really just ask for css. It all depends on what you want the site to look like, and what there is on the site.

PullJosh · 2012-03-20 20:27:17

Could this be closed? Thanks!

Greenatic · 2012-03-20 21:09:03

PullJosh wrote:
Could this be closed? Thanks!

If you want this thread to be closed, click the "Report" button and explain in the description. smile

PullJosh · 2012-03-21 07:22:59

Greenatic wrote:
PullJosh wrote:
Could this be closed? Thanks!
If you want this thread to be closed, click the "Report" button and explain in the description.

OK. I just wasn't quite sure. Thanks for the help! smile

cheddargirl · 2012-03-21 07:26:49

Closed by request.

Scratch

archived forums

#1 2012-03-04 14:54:03

I need help and I don't even know what language to use!

Code:

Code:

#2 2012-03-04 14:59:40

Re: I need help and I don't even know what language to use!

Code:

#3 2012-03-04 15:17:20

Re: I need help and I don't even know what language to use!

jvvg wrote:

Code:

Code:

#4 2012-03-04 15:34:05

Re: I need help and I don't even know what language to use!

#5 2012-03-04 15:44:47

Re: I need help and I don't even know what language to use!

#6 2012-03-04 16:00:20

Re: I need help and I don't even know what language to use!

Code:

#7 2012-03-04 16:21:59

Re: I need help and I don't even know what language to use!

bobbybee wrote:

jvvg wrote:

Code:

Code:

#8 2012-03-04 16:29:10

Re: I need help and I don't even know what language to use!

nXIII wrote:

Code:

#9 2012-03-04 16:55:20

Re: I need help and I don't even know what language to use!

Code:

#10 2012-03-04 17:35:55

Re: I need help and I don't even know what language to use!

#11 2012-03-04 19:20:53

Re: I need help and I don't even know what language to use!

rookwood101 wrote:

#12 2012-03-05 00:48:01

Re: I need help and I don't even know what language to use!

Code:

Code:

#13 2012-03-05 02:49:51

Re: I need help and I don't even know what language to use!

nXIII wrote:

rookwood101 wrote:

#14 2012-03-05 12:07:56

Re: I need help and I don't even know what language to use!

PullJosh wrote:

#15 2012-03-08 16:32:20

Re: I need help and I don't even know what language to use!

PullJosh wrote:

#16 2012-03-20 20:27:17

Re: I need help and I don't even know what language to use!

#17 2012-03-20 21:09:03

Re: I need help and I don't even know what language to use!

PullJosh wrote:

#18 2012-03-21 07:22:59

Re: I need help and I don't even know what language to use!

Greenatic wrote:

PullJosh wrote:

#19 2012-03-21 07:26:49

Re: I need help and I don't even know what language to use!

Board footer