We Keep Coding

How can I have a jQuery onclick function return the element instead of the event?

I have a function called deleteTask which currently just does console.log(this)
<input type="button" value="Delete Task" onclick="deleteTask()"/> (note that this in a jQuery function, not in a HTML file) returns [object Window]
while del.onclick = deleteTask; (where del is the input button) returns the object that was clicked, in this case, <input>
How can I have the jQuery version output similarly to the pure JS one?

You could use Function#call, but it is generally better to use addEventListener.
function deleteTask() {
console.log(this)
}
<input type="button" value="Delete Task" onclick="deleteTask.call(this)" />

In jQuery you'd set it up like this:
html:
<input type="button" value="Delete Task" data-role='delete' />
script:
$(document).ready(function() {
$('[data-role=delete]').click( deleteTask )
})
function deleteTask() {
// element clicked is this -- or if you want it ready for JQ: $(this)
}

store value from button in variable using javaScript

I have two buttons and I want to store the value attribute of the button pressed into a variable called amount. The code below is clearly wrong I have two identical id's for both buttons. What should I be doing in the function to save the value attribute to the variable amount onclick?
<button type="button" id='btn' onclick='storeVar' value='1'>1</button>
<button type="button" id='btn' onclick='storeVar' value='2'>2</button>
<script>
function storeVar() {
var amount = document.getElementById('btn').getAttribute('value');
console.log(amount);
}
</script>

The attribute id must be unique in a document, use class instead. Also pass this to the function so that you can refer the current button inside the function:
function storeVar(el) {
var amount = el.getAttribute('value');
// OR: simply
// var amount = el.value;
console.log(amount);
}
<button type="button" class='btn' onclick='storeVar(this)' value='1'>1</button>
<button type="button" class='btn' onclick='storeVar(this)' value='2'>2</button>

Make sure to have unique Id's.
<button type="button" id='btn-one' onclick='storeVar(this.value)' value='1'>1</button>
<button type="button" id='btn-two' onclick='storeVar(this.value)' value='2'>2</button>
<script>
function storeVar(value){
let amount = value;
console.log(amount);
}
</script>

Either give a unique id for each button or completely remove id attribute. After fixing your html try the following code.
<button type="button" id='btn' onclick='storeVar(this.value)' value='1'>1</button>
<button type="button" id='btn-two' onclick='storeVar(this.value)' value='2'>2</button>
<script>
function storeVar(v){
let amount = v;
console.log(amount);
}
</script>

Getting hiddenvalue HTML property from javascript

I am trying to access the hidden HTML value (hiddenvalue) from javascript and storing it into a variable env.
HTML:
<button id="slct" hiddenfield="Forest" type="button" class="btn btn-default">Hello</button>
JS:
$('#slct').click(function (event) {
document.getElementById('env').value = $('#' + $(event.target).data('hiddenfield')).value;
});
What am I missing?

I would create a hidden html field
<input type="hidden" id="someId" value="someValue">
Getting the value of this field would look like:
var theValue = document.getElementById('someId').value;
What you want is probably this:
html:
<input type="hidden" id="env" value="">
<button class="slct" hiddenfield="Forest" type="button" class="btn btn-default">This sets Forest</button>
<button class="slct" hiddenfield="Fruit" type="button" class="btn btn-default">This sets Fruit</button>
javascript:
$('.slct').click(function(event) {
// Set value to hidden field
$('#env').val($(this).attr('hiddenfield'));
});
you can use data() instead of attr(), but the attribute needs to start with 'data-' then. E.g. data('hiddenvalue') to retrieve the value of attribute data-hiddenvalue
(see https://jsfiddle.net/2k0791hk/1/)

Insert javascript variable between string

<script type="text/javascript">
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent('+valA+')">');
function saveContent(con){
alert (con);
}
</script>
I am using this code to display a submit button and it comes to the page body. but when clicked on the button it is not alerting the value. Please help me...
Thanks

Why type="submit"?
assuming #did is the id of your div or some container
$("#did").html($("<input type='button' value='save' />").click(function(){
alert(valA);
}));
This will append a button in your div with click event attached to it. Remember type should be button for this case.

Escape insert variable
Your result is:
<input type="submit" name="mybtn" value="Save" onClick="saveContent(sometext)">
Error : sometext is not defined
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent(\''+valA+'\')">');
function saveContent(con){
alert (con);
}
Result of this:
<input type="submit" name="mybtn" value="Save" onClick="saveContent('sometext')">
but use better previous answer

Give the JavaScript the button's id

In my JavaScript code, I have to make a line like this (I use smarty template engine, that is the literal stuff).
<script language="javascript" type="text/javascript">
function ajaxTextKill() {
// ...etc.
ajaxRequest.open("GET", "functions.php?action=kill{/literal}&id="+IWANTMYIDHERE+"&p={$smarty.get.page}&c={$smarty.get.sel}{literal}", true);
ajaxRequest.send(null);
}
After this in my HTML code,
<input type="button" id="87" value="del" onClick="return ajaxTextKill();" />
I'd like to give the JavaScript the input's id value. How to do this?

You don't necessarily need the ID if you pass a reference to the field itself.
<input type="button" id="87" value="del" onClick="return ajaxTextKill(this);" />
And access the ID like so:
function ajaxTextKill(object){
alert(object.id);
}

<input type="button" id="a87" value="del" onClick="return ajaxTextKill(this.id);" />

The HTML
<input type="button" id="87" value="del" onClick="return ajaxTextKill(this.id);" />
The JavaScript
function ajaxTextKill(id){
...etc.
ajaxRequest.open("GET", "functions.php?action=kill{/literal}&id="+id+"&p={$smarty.get.page}&c={$smarty.get.sel}{literal}", true);
ajaxRequest.send(null); }

Let the element pass itself to the function by ajaxTextKill(this). Then just grab its ID by element.id.
function ajaxTextKill(element) {
var buttonid = element.id;
ajaxRequest.open("GET", "functions.php?action=kill{/literal}&id="+ buttonid +"&p={$smarty.get.page}&c={$smarty.get.sel}{literal}", true);
ajaxRequest.send(null);
}