I'm at very beggining stage and I'd like to know something.. Is there a way to set a variable like this (or a similiar way)?
<body>
<button id="button1" onclick="change(this.something);"> click me </button>
<button id="button2" onclick="change(this.lorem);"> or this one </button>
<div id="target"> change this content </div>
<script>
function change(variable)
{
document.getElementById("target").innerHTML = variable;
}
</script>
</body>
or something like this
<body>
<button id="button1" onclick="change(this.value(v1));"> click me </button>
<button id="button2" onclick="change(this.value(v2));"> or this one</button>
<div id="target"> change this content </div>
<script>
function change(value)
{
var v1 = "something";
var v2 = "lorem";
document.getElementById("target").innerHTML = variable;
}
</script>
of course both are not working.. just don't know how to find an answer.
Perhaps you mean to pass a string literal to the function, i.e. change('literal text'):
function change(variable) {
document.getElementById("target").innerHTML = variable;
}
<button id="button1" onclick="change('something');"> click me </button>
<button id="button2" onclick="change('lorem');"> or this one </button>
<div id="target"> change this content </div>
If you intent to set the contents of the div to something or lorem, then you should pass those using a string literal instead of trying to access a property on this.
<button id="button1" onclick="change('something');"> click me </button>
<button id="button2" onclick="change('lorem');"> or this one </button>
Using a string literal passes a String containing the value specified to the change function whereas using this.something is a property accessor which will try to get the value of the something property on the this object.
In your second example, you can't use v1 and v2 from the onclick handler because those variables are scoped inside your change function and aren't accessible from the outside.
Related
First of all I'm adding a button via js:
let newTextArea = "<div class='row mt-4'><div class='col'><button type='button' class='btn btn-light rimuovi' onclick='removeIt()'>Rimuovi</button></div</div>";
Once on the page, I might want to remove it so I'm calling that function on a click:
function removeIt(e) {
e.closest(".row").remove();
}
but I'm getting
Cannot read properties of undefined (reading 'closest') at removeIt
You just forgot to pass your element (e) in the paramters in your JS fonction on the HTML.
So, try with :
onclick = 'removeIt(this)';
Working example:
function removeIt(e) {
e.closest(".row").remove();
}
<div class="row">
<button onclick='removeIt(this)'>Rimuovi</button>
</div>
Hope this helps you.
As others mentioned, you forgot to pass "this" as a parameter to your removeIt() method. The "this" keywords refers to, in this case, the element in which the click listener is used (your button). With the "this" keyword set as a parameter, JS can now look for a "closest" element with the class "row". It starts from the button and goes up the dom-tree until it finds an element with a className "row" or until it reaches the root.
Working example:
<!DOCTYPE html>
<html>
<body>
<div class="row mt-4">
<div class="col">
<button
type="button"
class="btn btn-light rimuovi"
onclick="removeIt(this)"
>
Rimuovi
</button>
</div>
</div>
<script>
function removeIt(element) {
closest = element.closest('.row');
closest.remove();
}
</script>
</body>
</html>
The main issue is because you aren't providing the e argument when you call the removeIt() function in the onclick attribute.
However you should note that using an inline onclick attribute is not good practice. A better way to achieve what you need is to attach an unobtrusive delegated event handler which accepts the Event object as an argument. You can then use that Event to retrieve the Element object which triggered the handler. Something like this:
const rowTemplate = document.querySelector('#row-template');
const container = document.querySelector('.container');
const addBtn = document.querySelector('.add');
addBtn.addEventListener('click', () => {
container.innerHTML += rowTemplate.innerHTML;
});
container.addEventListener('click', e => {
if (e.target.matches('.rimuovi'))
e.target.closest('.row').remove();
});
<button class="add">Add</button>
<div class="container"></div>
<template id="row-template">
<div class="row mt-4">
<div class="col">
<button type="button" class="btn btn-light rimuovi">Rimuovi</button>
</div>
</div>
</template>
How can I select a button based on its value and click on it (in Javascript)?
I already found it in JQuery:
$('input [type = button] [value = my task]');
My HTML Code for the Button is :
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>
<script type="text/javascript" id="button5b9f66b97cf47_script">
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function () {
jQuery(window).trigger('buttonClicked', [this, {"type":"submit","value":"My Task","name":"","id":"button5b9f66b97cf47","class":"green ","title":"","confirm":"","onclick":""}]);
});
});
</script>
What is the equivalent in JS and how may i click on it
(probably like this: buttonSelected.click(); ) .
And how do i run the javascript of the button clicked ?
Use querySelector to select it. Then click()
Your HTML has a button and not an input element so I changed the selector to match the HTML.
let button = document.querySelector('button[value="my task"]');
button.click();
<button type="submit" value="my task" id="button5b9f54e9ec4ad" class="green " onclick="alert('clicked')">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Launch</div>
</div>
</button>
Otherwise, use this selector:
document.querySelector('input[type="button"][value="my task"]')
Note that if you have multiple buttons with the same value you'll need to use querySelectorAll and you'll get a list of all the buttons.
Then you can loop over them and click() them all.
Edit - new snippet after question edit
jQuery(function() {
jQuery('button#button5b9f66b97cf47').click(function() {alert('success')});
document.querySelector('button[value="My Task"]').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">Lancer le pillage</div>
</div>
you can try:
var elements = document.querySelectorAll("input[type = button][value=something]");
note that querySelectorAll returns array so to get the element you should use indexing to index the first element of the returned array and then to click:
elements[0].click()
and to add a event listener u can do:
elements[0].addEventListener('click', function(event){
event.preventDefault()
//do anything after button is clicked
})
and don't forget to add onclick attribute to your button element in html to call the equivalent function in your javascript code with event object
I am not recommended this way because of excess your coding but as you mentioned, below are the equivalent way.
$(document).ready(function() {
var selectedbuttonValue = "2"; //change value here to find that button
var buttonList = document.getElementsByClassName("btn")
for (i = 0; i < buttonList.length; i++) {
var currentButtonValue = buttonList[i];
if (selectedbuttonValue == currentButtonValue.value) {
currentButtonValue.click();
}
}
});
function callMe(valuee) {
alert(valuee);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" class="btn" value="1" onclick="callMe(1)" />
<input type="button" class="btn" value="2" onclick="callMe(2)" />
<input type="button" class="btn" value="3" onclick="callMe(3)" />
Using JavaScripts querySelector in similiar manner works in this case
document.querySelector('input[type="button"][value="my task" i]')
EDIT
You might save your selection in variable and attach eventListener to it. This would work as you desire.
Notice event.preventDefault() -function, if this would be part of form it would example prevent default from send action and you should trigger sending form manually. event-variable itselfs contains object about your click-event
var button = document.querySelector('input[type="button"][value="my task" i]')
button.addEventListener('click', function(event){
event.preventDefault() // Example if you want to prevent button default behaviour
// RUN YOUR CODE =>
console.log(123)
})
I have a bootstrap card which has three different content views inside it. I am controlling the view of each of the separate data sets onclick of a link for each one. The problem is when I click a link it does not hide the previous one. I am having trouble getting the function right with typescript.
in my component.ts file
public showEquifax:boolean = true;
public showExperian:boolean = false;
public showTransunion:boolean = false;
Then in my html file
<div class="btn-group" role="group" aria-label="Credit Report Navigation">
<button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
<button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
<button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
</div>
Based on this logic how can I change the boolean value of the functions to false when the link clicked value gets changed to true
I tried to do something like this,
public showEquifax() {
showExperian() = false;
showTransunion() = false;
return true;
}
But I get an error for left-hand side assignment expression.
How can I write each of these boolean functions to change the others to false when the current function is set to true?
What you want is: when one is shown, the other two are hidden, right? What about change your logic to something like this:
// On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';
Then, the buttons would act like this:
<button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...
Then you could show your components like this:
<div *ngIf="shown === 'EQUIFAX'">
content here
</div>
<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>
I need to change the variable "prefs" to either "easy, medium, or hard" based on user click.
Example:
THIS
{{choice.prefs.title}}
NEEDS TO CHANGE TO
{{choice.easy.price}} or {{choice.medium.price}} or {{choice.hard.price}}
based on which button is clicked by the user
<button class="button button-stable" ng-click="prefs="easy"")>Change to Easy</button>
</div>
<button class="button button-stable" ng-click="diff='normal'">Change to Medium</button>
</div>
<button class="button button-stable" ng-click="diff='hard'">Change to Hard</button>
</div>
Manually typing
{{choice.easy.price}} works but {{choice.prefs.price}} and ng-click="pref='easy'" does not work
Thanks for the help in advance
EDIT:
The array I am trying to access in my controller looks like this
allbooks={
book1:{
easy{title:"whatever"},
medium{title:"hello"},
hard{title:"another"}
},
book2:{
easy{title:"whatever"},
medium{title:"hello"},
hard{title:"another"}
},
book3:{
easy{title:"whatever"},
medium{title:"hello"},
hard{title:"another"}
},
}
Choice is assigned by a function that simply sets choice to allbooks.book1 or allbooks.book2 based on user clicks
So I need to combine choice and prefs
Thanks:)
You may do something like this:
<button class="button button-stable" ng-click="prefs='easy'")>Change to Easy</button>
</div>
<button class="button button-stable" ng-click="prefs='normal'">Change to Medium</button>
</div>
<button class="button button-stable" ng-click="prefs='hard'">Change to Hard</button>
</div>
and use: $scope[prefs].title instead of $scope.prefs.title
(Use [] notation instead of the . notation when referencing variable object properties)
all. I have html layout like this:
<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" onclick="updateLine()" value="Update">
</div>
</div>
I want to obtain the div's ID, in this case, which is 1.
This is what I did.
function updateLine() {
alert(this.parent().parent().attr("id"));
}
However, it failed, then I check
alert(this);
it returns to me the window object.
So the question is , how could I get the id's value, which is 1.
Thanks.
You need to pass this to the function as follows
<input type="button" class="btn btn-default" onclick="updateLine(this)" value="Update">
function updateLine(obj) {
alert(obj);
$(obj).closest('.row').attr('id'); // will return the id, note that numeric values like 1 are invalid
}
You do not need to pass this to the function. In an event handler this is the element clicked. However, to use .parent() etc on it you need the jQuery object for that element which is $(this)
Also, I would strongly recomment using .closest instead of .parent().parent(). Something like
$(this).closest('div.row').attr('id')
Way less likely to break when you make small layout changes...
The comments about using jQuery events instead of inline javascript are also good advice.
Example:
<div class="row" id="1">
/*Other code has nothing to do with <div class="form-group col-lg-1">*/
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" value="Update">
</div>
</div>
<script type="text/javascript">
$(function(){
function updateLine(event){
alert( $(this).closest('.row').attr('id') );
}
// If you have other buttons add a class like 'btn-update' and use that instead
$('body').on('click', '.btn-default', updateLine);
});
</script>
If you want to do inline event handlers, you need to pass this:
onclick="updateLine(this)"
then in js:
function updateLine(obj) {
alert($(obj).closest('.row').attr("id"));
}
However, I'd recommend removing the inline handler if possible and using jQuery to do the binding:
$('button').click(function() {
alert($(this).closest('.row').attr("id"));
});
What you are trying do is very bad practice. It will never work.
Firs, you should not use inline javascript.
Second, you should use real jQuery code.
Below you can see a working example.
<div class="row" id="1">
<div class="form-group col-lg-1">
<input type="button" class="btn btn-default" value="Update" id="someID" />
</div>
</div>
And your jQuery code should be like:
$(function () {
$('#someID').click(function () {
alert($(this).parents('div:eq(1)').prop('id'));
});
});
Here is a working example: http://jsfiddle.net/avramcosmin/Z9snq/
A bit late but what worked for me:
$(document).on('click', '.id', function(event) {
const elem = $(this);
})