Jump to content
Please Use CODE Tags

help needed with basic javascript/jquery

JanY
By JanY
in Programming
 Share
Go to solution Solved by JanY,

The basic premise you need to get working is:

  • you have a button element or something on your site that acts as a button that a user needs to press
  • the browser listens to for an event, in this case a mouse click, to be performed on that button
  • when it detects that the user has clicked on the appropriate area, it will perform a series of functions

So the concept works, you just need to get the code working.

 

It's working now, I removed all the Jquery code from the HTML page so I only have the jquery google link and the link to my javascript (end of body):

 

<script type="text/javascript" src="OpdrachtJquery.js"></script>
 

Now all the Jquery is in the javascript file:

 

$("#button").click(function(){
var naam = document.getElementById("naam").value;
var titel = document.getElementById("titel").value;
var score = document.getElementById("score").value;
var tekst = document.getElementById("tekst").value;
 
var reviews = "\r\n\r\n\r\nTitel: " + titel + "\r\nScore: " + score + "\r\nReview: " + tekst + "\r\nGepost door: " + naam;
document.getElementById("reviews").innerHTML += reviews;
});
 
 
I have no idea if this is good use of jquery but it works fine.Thanks for the help.
Posted

I have a small assignment for my course of javascript, we need to create any site with jquery elements in it. We haven't seen any jquery yet so we need to learn it ourselves.

I've made a program which allows you to upload movie reviews. Keep in mind this is just an exercise to learn jquery and javascript. I started of making the program with only javascript and it works but now i want to change it so the onclick attribute of the button which starts the javascript function is started by a jquery click function. I also have a <p> tag which should count how many reviews have been posted starting with 0. The language on the site is dutch but it shouldn't be too hard to understand, ask me if you need translation. I would appreciate the easiest/least lines of jquery code so I can understand it myself. Thanks

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
snip

 

You might want to revise your question/request for help, because

 

 

Why don't you post a requirements specification for what you need done so that we can actually understand what you are trying to do and help?

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

You might want to revise your question/request for help, because

 

 

Why don't you post a requirements specification for what you need done so that we can actually understand what you are trying to do and help?

 

EDIT: I just realised it didn't include my files, I had to browse and then confirm which i didn't see. It's telling me I can't upload it so I'll just include it in tekst.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
HTML:

 

    <body>

        <h1>Movie-reviews</h1>

 

        <label>Naam</label><br/>

        <input type="text" name="naam" id="naam"><br/>

        <label>Titel</label><br/>

        <input type="text" name="titel" id="titel"><br/>

        <label>Score</label><br/>

        <input type="number" max="10" min="0" name="score" id="score"><br/>

        <label>Review</label><br/>

        <textarea id="tekst" maxlength="250" cols="50" rows="10" placeholder="type hier je opmerkingen..."></textarea><br/>

        <button type="button" id="button">Post review</button><br/>

        <p>Al meer dan </p>

        <p id="aantal"></p>

        <p> reviews geupload!</p>

 

        <pre id="reviews">

        </pre>

 

 

        <script type="text/javascript" src="OpdrachtJquery.js"></script>


        

        <script>

        $(function() {

("#button").click(function(){

$("#button").attr("onclick","Reviews()");

$("#aantal").append("een");

});

});

 

</script>

        

    </body>

</html>

 

JAVASCRIPT:

 


function Reviews() {

 

var naam = document.getElementById("naam").value;

var titel = document.getElementById("titel").value;

var score = document.getElementById("score").value;

var tekst = document.getElementById("tekst").value;

 

var reviews = "\r\n\r\n\r\nTitel: " + titel + "\r\nScore: " + score + "\r\nReview: " + tekst + "\r\nGepost door: " + naam;

 

return reviews;

//document.getElementById("reviews").innerHTML += reviews;

}

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
snip

 

I see that you've revise your original post, and now finally makes some sense.

 

You need to designate a function that is listening to an action performed on a certain element instead of adding an "onclick" inside the element.  See this link.

 

http://www.w3schools.com/jquery/event_click.asp

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

I see that you've revise your original post, and now finally makes some sense.

 

You need to designate a function that is listening to an action performed on a certain element instead of adding an "onclick" inside the element.  See this link.

 

http://www.w3schools.com/jquery/event_click.asp

 

So instead of: 

 

$(function() {
("#button").click(function(){
$("#button").attr("onclick","Reviews()");
$("#aantal").append("een");
});});
 
Something like:
 
$(function() {
("#button").click(function(){
Reviews();
$("#aantal").append("een");
});});
 
This doesn't work though, either it's not possible or I am doing it wrong
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

So instead of: 

 

$(function() {
("#button").click(function(){
$("#button").attr("onclick","Reviews()");
$("#aantal").append("een");
});});
 
Something like:
 
$(function() {
("#button").click(function(){
Reviews();
$("#aantal").append("een");
});});
 
This doesn't work though, either it's not possible or I am doing it wrong

 

 

The basic premise you need to get working is:

  • you have a button element or something on your site that acts as a button that a user needs to press
  • the browser listens to for an event, in this case a mouse click, to be performed on that button
  • when it detects that the user has clicked on the appropriate area, it will perform a series of functions

So the concept works, you just need to get the code working.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
  • Solution

The basic premise you need to get working is:

  • you have a button element or something on your site that acts as a button that a user needs to press
  • the browser listens to for an event, in this case a mouse click, to be performed on that button
  • when it detects that the user has clicked on the appropriate area, it will perform a series of functions

So the concept works, you just need to get the code working.

 

It's working now, I removed all the Jquery code from the HTML page so I only have the jquery google link and the link to my javascript (end of body):

 

<script type="text/javascript" src="OpdrachtJquery.js"></script>
 

Now all the Jquery is in the javascript file:

 

$("#button").click(function(){
var naam = document.getElementById("naam").value;
var titel = document.getElementById("titel").value;
var score = document.getElementById("score").value;
var tekst = document.getElementById("tekst").value;
 
var reviews = "\r\n\r\n\r\nTitel: " + titel + "\r\nScore: " + score + "\r\nReview: " + tekst + "\r\nGepost door: " + naam;
document.getElementById("reviews").innerHTML += reviews;
});
 
 
I have no idea if this is good use of jquery but it works fine.Thanks for the help.
Link to comment
Share on other sites
Link to post
Share on other sites
Posted
snip

 

1. You don't need to copy the contents of the JQuery JS file into your HTML, you can copy the JS file into your hosting server and reference it without having to reference a version hosted by Google or any other server.

2. It's better to keep all your custom Javascript functions in a separate file instead of nesting them inside HTML files.  Makes it easier to organize and share scripts between several web pages.

Guide: DSLR or Video camera?, Guide: Film/Photo makers' useful resources, Guide: Lenses, a quick primer

Nikon D4, Nikon D800E, Fuji X-E2, Canon G16, Gopro Hero 3+, iPhone 5s. Hasselblad 500C/M, Sony PXW-FS7

ICT Consultant, Photographer, Video producer, Scuba diver and underwater explorer, Nature & humanitarian documentary producer

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×