I am trying to make a button (id="delete") that will clear any text entered in my field (id="input"), I have made a function and button, however after pressing the button nothing happens. Can't find the issue, the console also doesn't give any errors. Will be thankful for your assistance.
HTML:
<span contenteditable="true" ><p id="input"></p></span>
<button id="delete">Delete Data</button>
JS:
const trigger = document.getElementById("delete");
trigger.value = '';
Thanks!
If you want to take action when a button is clicked, you should listen for its "click" event.
document.querySelector("#delete").addEventListener('click', () => {
document.getElementById("input").innerHTML = ''
})
Related
I have a text input box which does 3 things, it begins with the button 'Report A Bug' when it is closed, upon clicking it opens a text box & the Report A Bug button becomes 'Close'. I now want to combine the code from all JS below to work with with the following HTML Button, but I can't see a clear way to move forward on this. When I've tried my functionality has disappeared, or button simply no longer changes text.
Button HTML.
<button id="myBtnToReportABug" onclick="toggleReportForm()" type="button" class="btn btn-secondary float-right">{{#if report_form_closed }} Report A Problem {{else}} Close {{/if}}</button> </div>
JS:
// changes text on 'report problem' button when form open
function change() {
var theButton = document.getElementById("myBtnToReportABug");
if (theButton.innerHTML == "Close")
theButton.innerHTML = "Report A Problem";
else
theButton.innerHTML = "Close";
}
// clears text field onclick
function clearFields() {
document.getElementById("nameInput").value = "";
}
// changes text on 'submit' back to original button text when report is made
function changeSecond() {
var theButton = document.getElementById("myBtnToReportABug");
if (theButton.innerHTML == "Close")
theButton.innerHTML = "Report A Problem";
}
function toggleReportForm() {
var report_form_closed = document.getElementById("myBtnToReportABug");
}
try using addEventListener;
eg.
function callback(){
//all the functions call them here
}
document.getElementById("myBtnToReportABug").addEventListener(callback)
I have a textarea with this content :
[supreme] a test text or anything [/supreme]
I have a button too. I want to when button clicked , textarea selected and change caret position to this :
[supreme] a test text or anything <caret postion> [/supreme]
How can i do this with javascript or jquery ?
Thanks .
Here is a quick example. It could be done cleaner but it should get you started.
$(document).ready(function() {
$('.button').click(function(e) {
var $textArea = $('.textArea');
var prevValue = $textArea.val();
$textArea.focus().val('').val(prevValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textArea">a test text or anything</textarea>
<button class="button">
CLick Me
</button>
I would like to add text to the active textbox when a button is clicked.
I have read many threads explaining how it is done when one is wishing to add to a specific textbox but nothing on simply adding text to whichever text field is active...
Any help would be appreciated. Thanks.
The below is a solution for a virtual keyboard.
Pure JS + HTML:
function bind() {
var keyArr = document.getElementsByClassName('key');
for(var i = 0; i < keyArr.length; i++) {
keyArr[i].addEventListener('click', function() {
document.getElementById('textinput').value += this.innerHTML;
});
}
var capsLock = document.getElementById('capslock');
capsLock.addEventListener('click', function() {
for(var i = 0; i < keyArr.length; i++) {
if(capsLock.capsactive) {
keyArr[i].innerHTML = keyArr[i].innerHTML.toLowerCase();
} else {
keyArr[i].innerHTML = keyArr[i].innerHTML.toUpperCase();
}
}
capsLock.capsactive = !capsLock.capsactive;
});
}
<body onload='bind()'>
<input id='textinput'><br>
<button class='key'>q</button>
<button class='key'>w</button>
<button class='key'>e</button>
<button class='key'>r</button>
<button class='key'>t</button>
<button class='key'>y</button><br>
<button id='capslock' capsactive=false>CapsLock</button>
</body>
You can access a textbox's value by element.value or by $(selector).val().
For changing, use: element.value = newvalue; (JS) or $(selector).val(newvalue); (jQuery).
In the example, ...addEventListener... attaches a function to each button. The function, here, changes the value of the textinput textbox, to be the previous value + the text of the button which was pressed.
For instance, if the even the capsLock button is given the class key, on clicking capsLock, the text "Caps Lock" will be appended to the textbox.
Note: This solution covers adding text to a definite field. If there are multiple textbox-es present on the page, and the text has to be added to the currently focused one, a different approach has to be taken:
var lfl = -1, capsactive = false;
$(document).ready(function() {
$('*').blur(function() {
lfl = this;
});
$('.key').click(function() {
if($(lfl).hasClass('vkballowed')) {
$(lfl).val($(lfl).val() + $(this).html());
$(lfl).focus();
}
});
$('#capslock').click(function() {
capsactive = !capsactive;
if(capsactive == true) {
$('.key').each(function() {
$(this).html($(this).html().toUpperCase());
});
} else {
$('.key').each(function() {
$(this).html($(this).html().toLowerCase());
});
}
$(lfl).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input id='input0' class='vkballowed'><p>Editable</p><br>
<input id='input1' class='vkballowed'><p>Editable</p><br>
<input id='input2'><p>Not Editable</p><br>
<button class='key'>q</button>
<button class='key'>w</button>
<button class='key'>e</button>
<button class='key'>r</button>
<button class='key'>t</button>
<button class='key'>y</button><br>
<button id='capslock'>CapsLock</button>
Example instructions: Focus on the Editable text-fields, then press a key on the virtual-keyboard, so that corresponding text is appended to the fields. The virtual-keyboard doesn't work on the Not Editable text-field.
Here, the last element on the page that lost focus (was blurred) is stored in a variable. Next, whenever a key on the virtual-keyboard is pressed, first, it is checked whether the keyboard is allowed on that control, then the button's text is appended to the control, and finally, the control is given its focus back. Note that if the class vkballowed is added to controls such as buttons, no action would be effective on those controls. On other controls such as textareas, which have a value property, the virtual-keyboard will be functional.
The above approach isn't wholly correct. If, for instance, a key on the virtual-keyboard is pressed right after some other interactive button on the page, that button would receive focus again (this may not re-cause the action attached to that button, though). It, hopefully, gives you a starting point though.
jquery
$('#buttonId').click(function(event) {
$('.tstboxClass').val('heelo i am text box value.');
})
How do I "reset" the .replaceWith function so that the html, css and javascript are returned back to their original state?
The idea is to have an icon replace the text when the user clicks on "contact", and when the user clicks on "back" button, the icon returns back to the "contact" text. Right now, the icon switches back to text, but the text isn't responsive when I try to repeat the function a second time.
Here is the HTML:
<div class="contact">Contact</div>
<button class="back">Back</button>
And the Javascript:
var contactswitch = $('<div class="icon"><i class="fa fa-facebook"></i></div>');
var switchback = $('.contact');
$('.contact').click(function() {
$(this).replaceWith(contactswitch)
});
$('.back').click(function() {
$(contactswitch).replaceWith(switchback)
});
Thanks!
I think you need to re-assign the click handler on the back button click:
$('.back').click(function() {
switchback.click(function() { $(this).replaceWith(contactswitch);});
$(contactswitch).replaceWith(switchback)
});
I am trying to activate a text input using a button.
My function is like this.
function showHide4()
{
document.getElementById('snack').readOnly=false;
document.getElementById('snack').style.backgroundColor"#ffffff";
}
This function makes text input writable and changes background to white, but it gets activated only after I click on it.
Note:- My idea of activated text input is cursor(|) blinking in it. maybe activated is not a correct word for it but I don't know what else to call it.
EDIT:- I tried focus(), Problem in using focus() is Default value in my text input is getting selected automatically, which is not what I want, I want to put cursor(|) after that value.
Try this, I think focus() is what you are looking for:
function showHide4() {
var el = document.getElementById('snack');
el.readOnly = false;
el.style.backgroundColor = "#ffffff";
el.focus();
el.value = el.value;
};
To do what you want you need to cheat a bit, just reset (set again) the value of the input and it will work as you want.
DEMO HERE
function showHide4()
{
document.getElementById('snack').readOnly = false;
document.getElementById('snack').style.backgroundColor = "#ffffff";
document.getElementById('snack').focus();
}
This will work!
How to activate text input on a button click in React
This is how i did it using react.
export default function App() {
function showHide4() {
var el = document.getElementById("snack");
el.style.backgroundColor = "#fdd";
el.focus();
}
return (
<div className="App">
<input type="text" id="other" value="100" readonly="true" />
<input type="text" id="snack" />
<button type="button" onClick={showHide4} id="button">
Click
</button>
</div>
);
}