Creating responsive rating buttons in javascript/html - javascript

We have an assignment in school to improve project, without actually knowing the programming languages. We got the skeleton of the project and we must add some functionality to it.
The skeleton is a blog, that has a login/register/ and you can create, edit and delete articles.
My first idea is to add two buttons - like and dislike, linked to a variable. Clicking the like button will increase the rating with 1, and dislike will decrease it. I added the buttons but I'm struggling with the javascript code. It should look something like this:
<script>
var rating = 0;
function IncreaseRating() {
document.getElementById('like').value = ++rating;
};
function DecreaseRating() {
document.getElementById('dislike').value = --rating;
};
</script>
<button id="like" type="button" onclick="IncreaseRating()">Like</button>
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button>
<script>document.write(rating)</script>
but it is not working. Somehow I managed to display the rating value, but it does not increase nor decrease. How can I solve my problem?

The order of your code is the problem, you run your script tag BEFORE the elements are included in the DOM.
To fix it, just change the order, put the script tag at the very bottom of the document, right before the closing tag.
<button id="like" type="button" onclick="IncreaseRating()">Like</button>
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button>
<script>
var rating = 0;
function IncreaseRating() {
document.getElementById('like').value = ++rating;
};
function DecreaseRating() {
document.getElementById('dislike').value = --rating;
};
</script>
<script>document.write(rating)</script>

The problem is that you're calling your scripts in the body after you create your elements. The issue with that is, you've told your element to call function X but it cant find it as its not yet been declared (you declare it right after you create the element).
There are two solutions:
Use jQuery's event handling to handle the DOM element events like so:$('#like').click(function() { //actions here });
Or put your native Javascript code in your header with your meta data thus it is loaded and your functions are declared on page load (before your elements are created).
https://jsfiddle.net/h6sveuju/7/
Notice how if you click the Javascript settings you see that the
Load Type
is set to
No wrap - in
Also you're trying to increment the text of the buttons which are currently strings (Like and Dislike) which obviously is wrong as it would update the text of the buttons to be just the value of the rating thus leaving the button text something like 12.

Related

Guidance making interactive buttons in JavaScript

I'm new to JavaScript and I am stuck on exactly how to start in my text editor? I've tried googling but I'm getting mixed answers.
I'm trying to make four interactive buttons in a browser. I just don't know how to start? My file is open and the text editor is aware I am using JavaScript.
Now, do I need to start with a script tag? Then what should be the next steps? If anyone could provide me with a little guidance on how I should be thinking in my steps id greatly appreciate it.. Thank you very much
Start with the Hello World of using a Button HTML tag and script that handles a click event.
For example -- here is the Button defined in HTML.
<button type="submit" class="btn btn-primary btn-xl" id="HelloButton">Say Hello</button>
Now in a separate JS Script, you can handle the click event:
$(function() {
$("#HelloButton" ).click(function($e) {
alert("Say Hello");
} );// END of the button click event
} );
This uses JQUERY as well (in case you want to follow it).
Here is a very simple starting page - without using any libraries (like jQuery) or frameworks (like react or vue)
// define the button actions here:
document.querySelectorAll("button").forEach(btn=>btn.onclick=ev=>console.log(`Hey, you have clicked the ${btn.textContent} button!}`));
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button><br>
<textarea>edit your text here ...
</textarea>
In order for the script to work it needs to run after the page has loaded. In Stackoverflow snippets (see above) that is always the case. However, in your page you need to either put the <script> tag after your <body> element or put it into the callback function of the window.onload() event.

Append a load() output to the same div in jQuery

A button calls a JS function that loads a different PHP page asynchronously using jQuery load, and it will put the result in a errorReturn div.
<div id='errorReturn'></div>
<button onclick='trySomething()'>Click me</button>
<script>
function trySomething() {
var url = 'otherpage.php'
$('#errorReturn').load(url)
}
</script>
All is fine.
Since I want the user to see ALL the errors if the button is clicked multiple times, I wanted to APPEND that result to the same div.
I tried both
$('#errorReturn').append.load(url)
$('#errorReturn').append(load(url))
And they didn't work. Then I found the solution:
$('#errorReturn').append($('#errorReturn').load(url))
It works. Kind of :( It fills the errorReturn div, but it doesn't append to it. It simply overwrites it, as if I simply wrote
$('#errorReturn').load(url)
I should probably just take a break, but I cannot see what's wrong :(
EDIT: Since somebody flagged this as "answered in another question", the other question was using JS while I was explicitly asking for jQuery - plus the other answer generated a lot of fuss about adding HTML with possible XSS injection and I think the accepted answer here is way nicer and simpler to understand
load() always overwrites the content of the target element. To do what you require you could make the AJAX request and append the content manually. Try this:
<div id="errorReturn"></div>
<button id="add-content">Click me</button>
jQuery($ => {
$('#add-content').on('click', e => {
$.ajax({
url: 'otherpage.php',
success: html => $('#errorReturn').append(html)
});
});
});
Make a new <div>, .load() content into it, and .append() that.
$("#errorReturn").append($("<div/>").load(url));
You can of course also add styles etc. to the <div>, like for example a top margin to separate the individual errors.

Line clamping using a class element and Javascript

I have a PHP script that outputs data. It is all conveniently wrapped inside a p class.
It outputs the same data and same class multiple times, so there are like 6 blocks of text, each block being wrapped inside p class.
I need to reduce each block to 3 lines using any method possible. I already tried using PHP in various ways to no avail.
I came across Clamp.js which looked great. The only issue is, it will only work using ID. I can change the p class tags to p id, however, they'd all have to share the same ID, which, obviously, won't work.
Here's the current code I've tried:
var module = document.getElementsByClassName("clampjs");
$clamp(module, {clamp: 1});
And the HTML (times 6):
<div class="headtab">
Forum title<p class="bold">Posted By:</p> username <p class="bold">In:</p> category</div>
<div class="maintext">
<p class="clampjs">TEXT I WANT TO BE CLAMPED</p>
</div>
Like I say, it works fine when I use an ID, but obviously, only for the first block of text as the ID HAS to stay the same, that's why I'm using p class.
Sadly, what I've tried above doesn't work at all. Does anybody know a little fix for this script, or perhaps a different script that will clamp objects using a class element? Jquery is acceptable too.
Jsfiddle
Working code thanks to the accepted answer:
$(document).ready( function() {
$('.clampjs').css({ //changes the css of the clicked content.
'max-height':'75px', //give what ever height you want.
'overflow':'hidden'
});
});
this could be easily done with just editing your css
$('.clampjs').click( function() {
$(this).css({ //changes the css of the clicked content.
'height':'100px', //give what ever height you want.
'overflow':'hidden'
});
});
just now tested in my page it works...

EventListener cloning in userscript

I have this function:
function main() {
var bottomArea = document.getElementsByClassName("bottom-area");
for (var i = 0; i < bottomArea.length; i++) {
var showDialogLink = document.createElement("a");
showDialogLink.innerHTML = "link";
showDialogLink.onclick = function(){showSelect(this);return false;};
bottomArea[i].insertBefore(showDialogLink, bottomArea[i].childNodes[3]);
}
}
So far the code works just fine. When I click the newly created link, it calls showSelect(this) function just fine.
The problem is there is another userscript/browser extension (which I don't have access to - it's not mine), which basically clones whole another div in which 'bottom-area' div is nested. This is all right too, but the problem is that it doesn't clone my function trigger and those newly cloned instances (I'm not really sure what is their nature) of that link do no longer trigger showSelect(this) function. Only the first one created by my userscript does.
Is there some way in which I should add my function trigger on my link, that will stay even after cloning/copying?
EDIT: I'll just edit to show html tree:
This is at the beginning:
<div>
<div class="bottom-area"></div>
</div>
My userscript adds a link with an onclick eventlistener on the 'a' tag:
<div>
<div class="bottom-area"><a>link</a></div>
</div>
The other userscript basically clones it (there is a textarea inside the div and its value gets cloned too), but without the eventlistener, so clicking on the cloned links no longer triggers my function.
EDIT2: If it helps, the userscript I'm creating is a reddit userscript. I'm adding small functionality to commenting and adding a link right next to the 'reddiquette' link under the comment text field. That works with the pre-generated text field. However when I click 'reply' down the comment tree, the whole div together with text field, submit button and my link gets cloned under the comment I'm replying too, but my link no longer has the function trigger on itself.
The easiest solution may be to simply use HTML event attributes (instead of addEventListener), such as <a onclick="dostuff();">link</a>, because the attribute should be preserved during 'cloning'. See this fiddle (tested in Firefox 40) for an example.
Letting the code in the onclick attribute interact with your userscript may be be a little difficult because it runs in a different JavaScript environment. Luckily there's plenty of possible workarounds, depending on your exact needs.

User control with a client side API

Maybe I've picked a totally inappropriate/bad example.
What I have is a user control that contains a bunch of dynamically created Telerik RadGrids.
My user control is added to a couple of Telerik RadPageViews that are part of a RadMultiPage that is used alongside a RadTabStrip.
What I need to do is call a Javascript function in my usercontrol to update it's display whenever it's parent RadPageView is selected.
So basically I have the following Javascript code:
function OnClientTabSelected(sender, args)
{
// Get the MyControl that is on this tab
var myControl = $find("whatever");
// Call a method that updates the display
myControl.doSomething();
}
Thanks,
David
You can add a wrapper div in your User Control and then extend that div using jQuery to add your desired methods and properties. The trick is to set the div's id='<%=this.ID%>' - that way the div has the same ID as the User Control (which is fine because the User Control doesn't actually render anything - only its contents).
Then back on your containing page, you can just reference your UserControl's ID using $get('whatever') - and you'll actually select your extended div.. which will have all your methods and properties on it.
The nice thing about this approach is that all of your methods and properties and neatly scoped and nothing is in the global namespace.
I have a full demo solution and details here if you want more info:
http://programmerramblings.blogspot.com/2011/07/clientside-api-for-aspnet-user-controls.html
Just make a call to javascript method in input button if you are sure about the name of that function.
<input type="button" value="test" onclick="doSomething()" />
If you place any javascript code in the control that will be spit on the page and it will be available for calling provided both of them are in the same form.
for example your code will look like this if you look into the source of that page.
<script type="text/javascript">
function doSomething()
{
alert(new Date());
}
</script>
<div>
<span id="MyControl1_Label1">Dummy label</span>
</div>
<hr />
<input type="button" value="test" onclick="doSomething()" />
Edit: This is not a good way to access these methods in my opinion. When you are putting some javascript code inside a control then it should be used in that control only (There is no rule as such, its just a design suggestion). If you are trying to access javascript code of a control from outside that control then you need to revisit your design.
If you can give us more details on why you want to access that method, may be we can suggest some better way to do that.
Update: (As you have modified your question): Bit tricky to answer this as I dont have hands on experience with Rad controls. I guess there should be some feature which will help you to update the controls in that page without using javascript, may be have a look at clientside-API provided for Rad.
May be somebody who knows about RAD controls will help you.
You should make the control method public
public void doSomething
and call this from the page
myControl1.doSomething();

Categories

Resources