Please consider I am having below codes which is a set of elements for selecting and showing date.
<div>
<input type="text" class="txt txtDate"/>
<input type="button" class="btn btnDate" value="Select from Calendar"/>
<span class="remainedDays"></span>
<div>
Here I have an input for entering date, a button for selecting date from a calendar, and a label which shows difference between selected date and current date. All calculations and form interactions is handling by JavaScript and jQuery.
Since I use this date picker in many forms I'm looking for a way to define this elements in a new element and use new element. If I can do this I will write less codes and any change in in definition of new element will be automatically applied in all forms.
I am looking for something like this:
<mydatepicker class="dt1"></mydatepicker> or <mydatepicker class="dt1"/>
which should be rendered in browser as
<div class="dt1">
<input type="text" class="txt txtDate"/>
<input type="button" class="btn btnDate" value="Select from Calendar"/>
<span class="remainedDays"></span>
<div>
You can create a custom element in Vanilla JavaScript, but really not worth the hassle, I suggest you start using JavaScript frameworks for this kind of thing.
But anyway, you can do it in vanilla javascript like this:
First create a JavaScript file (e.g, c-element.js) and extend the HTMLElement class. Inside it's connectedCallback method, write the HTML content you'd like to render.
Then add the script to your HTML file, and just use the custom element's tag!
Of course, this is just a really simple example, you can add to it however you want. You can read the documentation on creating custom elements here.
class CElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<div class="c-element">
<div class="c-element__heading">
<h1> This is a custom element (CElement)</h1>
</div>
</div>
`;
}
}
customElements.define("c-element", CElement);
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<c-element> </c-element>
<script src="c-element.js"></script>
</body>
</html>
You need something like angular.js directive or Angular Component with pure JavaScript code.
You can create Web Component by extending HTMLElement and also you can get all attributes and class list of that custom Element to create more powerful and dynamic component:
class mydatepicker extends HTMLElement {
Classes;
CustomLabel;
constructor() {
super();
this.classes = this.classList.value;
this.CustomLabel = this.getAttribute("CustomLabel");
}
connectedCallback() {
this.innerHTML = `
<div class="${this.classes}">
<label> ${this.CustomLabel} </label>
<input type="text" class="txt txtDate"/>
<input type="button" class="btn btnDate" value="Select from Calendar"/>
<span class="remainedDays"></span>
<div>
`;
}
}
customElements.define("my-datepicker", mydatepicker);
.dt1{
color:red;
}
<my-datepicker class="dt1 dt2" CustomLabel="this is custome lable"> </my-datepicker>
Note that you can pass some classes and custom attribute you want
Related
I use Tailwind Elements library with Tailwind CSS in my project.
Everything works perfectly, but there is one problem appeared... because I'm trying to clone the element and add to the page a copy.
I do the clone of a form with cloneNode method like this:
I have hidden HTML template:
<template id="temp">
<form>
<div class="datepicker relative mb-3" data-mdb-toggle-button="false">
<input type="text" placeholder="Select a date" data-mdb-toggle="datepicker" />
<label class="text-gray-700">Select a date</label>
</div>
</form>
</template>
When user clicks a button somewhere in the page "+ Add new form", then the new form will be added to the page. There can be many forms as user wants. So I want to use this template to clone it and insert new and new and new nodes to the page. JS:
import 'tw-elements'
let newForm = document.querySelector("#temp").content.cloneNode(true); // clone the <form>
newForm.appendChild(document.body); // add to the <body>
After these manipulations the new form added to the page, but the Datepicker does not work.
As I understood, I should call the initialization of the element programmably via JS like this:
let datePicker = newForm.querySelect('.datepicker');
datePicker.tweDatePicker(); // smth like that maybe
Right? But how? I cannot find in the docs how to call and init the Datepicker (or any other component) via vanilla JS programmably?
Maybe you know the better approaches.
I'm trying to use userscript with Tampermonkey to modify some HTML elements on a webpage which don't contain id attributes.
I'm trying to re-enable some disabled buttons on a relatively basic javascript language learning game site. I'll change the style attribute so they look the same as regular buttons, and change the onclick value so they actually launch the game instead of doing nothing.
Now, I know how to do both of these things when I use inspect element on each one, and I've confirmed that it works. The problem arises when I try to write a userscript to do that for me - I've looked around and I can't seem to find a solution to the issue.
Here's the code for one of the buttons I want to change:
I want to change this:
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
To this:
<label onclick="gotoPlayCarPuzzle();" style="width=100%;border:outset;font-size:14px;color:blue;"> Car Puzzle (2 pts) </label>
I'm sure that if I could find out how to do it just for this one, I could do it for the others quite easily. They almost all follow the same format, and there are only three other buttons.
Some information that might help:
All of the disabled buttons have the same style attribute. If there's a way to find elements with the style attribute, that would probably be the way to go.
The buttons are accessed by a menu that closes when another element outside the menu is interacted with. Each time it's closed and re-opened, the attributes for the buttons are reset. This means the script will need to repeat.
Thanks in advance!
All of the disabled buttons have the same style attribute
If there's a way to find elements with the style attribute, that would
probably be the way to go.
There is and it is. You want a querySelectorAll querying the style attribute.
let matched = document.querySelectorAll("label[style='border:outset;font-size:14px;background-color:darkgrey;color:white;']");
You could also potentially target the onclick attribute:
let matched = document.querySelectorAll("label[onclick='xgotoPlayCarPuzzle();']");
Here is my solution:
function xgotoPlayCarPuzzle(event){
let theElement=event.target;
theElement.style.width="100%";
theElement.style.backgroundColor="red";
}
<label onclick="xgotoPlayCarPuzzle(event);" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
Maybe you just want to use the tag selector and modify its attributes after getting the element.
function playHook() {
alert(1);
}
(function(){
const eles = document.querySelectorAll("body > div > div > label")
eles.forEach(item => {
item.onclick = playHook;
item.style.background = "blue";
})
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selector</title>
</head>
<body>
<div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
<div>
<label onclick="xgotoPlayCarPuzzle();" style="border:outset;font-size:14px;background-color:darkgrey;color:white;"> Car Puzzle (2 pts) </label>
</div>
</div>
</body>
</html>
I have a small form and when the user clicks on an element I want to display some more fields to the form. This action can be done multiple times. So my ideia is to have a separated html file with these fields to be appended to the form so I got this
public showMoreFields(): void {
const wrapper_div = document.getElementById("wrapper");
const template = require("./my-template.html")
container.innerHTML += template
}
The new fields are being appended properly.
My first question is: Is this the best approach to load external html? (I don't have the "text/template" script tag)
Or should I create a new component and append it to the maim form?
....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>
If so, how do I append new ones?
Also read about ngTemplateOutlet but didn't figure out how can apply to my case.
I am quite confused about this
Second. Although my new fields are being displayed the click events they are not triggering my functions.
exemple:
<span class="fa fa-remove" (click)="cleanInput()"></span>
// this is not executing the cleanInput function
Thanks
You can use *ngIf or [hidden] attributes on the section which you want to hide.
Example:
<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
1,
you can use flag in your component to show/hide data on button click:
in component:
showData: boolean = false;
in html:
<button (click)="this.showData=!this.showData">show/hide</button>
<div *ngIf="this.showData">
...
</div>
I wrote a Chromium extension using clear JavaScript to interact with the DOM, but now I study VueJS and rewrote the extension to use Vue. I found one problem: there is one <input> element connected to Vue.
I change its value via the bg.cp property of the Vue instance, and now I need to select the DOM element. Is there any way to make text selection using the Vue instance instead of using document.getElementById('test').select()?
The final goal is to copy the <input> field to clipboard.
<body>
<div id="appBg">
<input v-model="cp" id="test">
</div>
<script>
//vue instance of div with input field
var bg = new Vue({
el: "#appBg",
data: {
cp: ""
}
});
</script>
</body>
you can use ref in DOM attribute and call it by $refs in js section
EX:
<input ref="inputName" />
and in js section call
this.$refs.inputName
here you can read explanation of it
I'm building a web app using React.js and react-bootstrap. I have a form page where the user can type in symptoms of a disease that they are experiencing. I want the user to be able to type in text and also have the option to remove previously typed text.
An example of it being done in Javascript is here:
http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3
I would like to have the same feature as the link above but using React. Here's the code I have so far for the section, but I'm unsure of the best way to continue.
var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>;
<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>
<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button>
When this.addSymptomField() is called, I want to add an Input field to the page, and when this.removeSymptomField() is called, I want to remove the existing Input field from the page.
Thank you so much!
You could keep a list of current inputs in state and modify that when calling addSymptomField and removeSymptomField
In your component constructor
this.state = { inputs: [] }
In render
<div className="inputs">
{this.renderInputs()}
</div>
And your renderInputs method could look like this
renderInputs() {
return this.state.inputs.map((input, index) => <Input key={index} type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>)
}
Then simply add or remove inputs to/from the list when calling the addSymptomField and removeSymptomField methods