I am making an unfair dice roller and I have a button with this code:
<button type="button" id="roll-button">Roll the Dice</button>
The button rolls the dice, but I want the site viewer to be able to change what this button says. I have no clue how to do this. Does it have to do with a variable in JavaScript?
Main Question: How do I make the person able to change the text with a form element?
Do you want this way?
Below code is create button tag. Also I set button tag attribute id and type.
HTML
...
<div id="root">
</div>
Javascript
<script>
var buttonText = 'Roll the Dice';
var button = document.createElement('button');
button.textContent = buttonText;
button.setAttribute('id', 'roll-button');
button.setAttribute('type', 'button');
document.getElementById('root').appendChild(button);
</script>
For the first time get the element from document and then change its text Content property to the variable text.
How do I make the person able to change the text with a form element?
Assuming that this is a text input, you'd have to get the value from the input then change the text of the button.
An additional text input field with the id "text-field" is added for this demo.
var textInput = document.getElementById("text-field").value; //gets text-field value
var button = document.getElementById("roll-button"); //gets the button element
button.innerHTML = textInput; //changes the value to what the text input is
Related
I'm looking to copy the text from a <p> element with the ID of code and put it in an input field with the data-field-id of 6197c68b4c806 when a button is clicked.
How could I do this? I would like the code to be inline if that is possible.
First you need to access the element you want to copy the text from with:
`let text = document.querySelector('css selector').text` or .textContent.
This will save the text existing in the element.
Then you select the input, using the same technique and then do:
.value = text.
Also add an event listener to the button you want to click to trigger this:
document.querySelector('btn.submit').addEventListener(() => {
let text = document.querySelector('css selector').text;
document.querySelector('input#x').value = text
})
Should do the trick.
document.queryselector('#btn').addEventListener(()=>
var q_t = document.queryselector('#input').text;
document.queryselector('#output').text(q_t);
)}
You have to follow this above code, hopefully you can solve this
I have a website where you can enter information into an input box and then below it a button that says "add". When pushing this button I want it to create a new button with the text inputted above.
I'm not quite sure even where to start with the javascript but here's my html:
<input type="text" name="device" id="device">
<button class="add">Add</button>\
I'm just trying to make an add button make another button with the text in input box above.
Concepts
You need to change the DOM and append a new Element to your HTML.
To do this you need to capture the value when you click on the button and, after that, render the new element. I've created a Codepen to help you with that:
To explain:
HTML
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<p id="my-content"></p>
Every element has an id that you'll use on your...
Javascript:
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const content = document.getElementById('my-content')
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
content.innerHTML = myInputValue
})
By first we get all elements on DOM using document.getElementById function. After that we add an event to our button, the event of click. After that, we catch the value inputted by the user and change the HTML inner our p tag and put the text that have been inputted in our input.
So, after that, the text will be rendered on the screen and you can see what you have inputted.
Soluctions
By now, using this concept, we can now use this and change also, in our element, the style of showing or not. You can follow to this other Codepen that I'll use in our example:
HTML:
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<button id="my-other-button"></button>
Javascript
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const myOtherButton = document.getElementById('my-other-button')
myOtherButton.style.display = 'none'
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
myOtherButton.style.display = 'block'
myOtherButton.innerHTML = myInputValue
})
So, now we are capturing our elements as before, but that time we capture also an empty button and, with style.display property we change, when the first render occurs, to not showing our button. After we click in the first button we change it again to show it and, as before, change the innerHTML with the text that user have inputted.
I'm wanting to change the source code of an auto-completer that I found on the D3 site.
Click here for link
I basically want to turn the <div id="test" style="width:100%; height:100%;"></div> code into a html form input box so when you click on the autocompleted item it will process a "submit" type request.
Thanks
If I understood the question and what you want to do, you can replace the div with input using JavaScript by doing something like this :
var toReplace = document.getElementById('test'); //element to be replaced
var parent = toReplace.parentNode;
var input = document.createElement('input'); // new element
input.id = input.name = "test";
input.type = 'text';
// can declare more attributes for input here
parent.replaceChild(input, toReplace); // Replacing here..
jsFiddle
On click of a button, I am showing a popup with one text area and a submit button.
I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)
Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.
Below is my code:
function onCalChange(cal) {
// inputField = cal.inputField;
startDate = cal.date;
var calVal = this.id;
popup2(calVal);
}
function popup2(calVal) {
idValue = calVal.split("-");
$('.popup2').css('display','block');
//$('.popup2').addClass('pop_up_bckgd');
$(".popup2").append("<div class='pop_up_bckgd'></div>");
$(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}
function clicksubmit(id) {
var idNum= parseInt(id);
if ($('#reasontxt' + idNum).val() == "") {
// alert("1");
$('#reasontxt' + idNum).next(".validation").remove();
$('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");
} else {
alert('2');
alert($('#reasontxt' + idNum).val());
$('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
// $('#reasontxt' + idNum).val() == ""
$('.popup2').fadeOut();
}
}
After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).
From what I saw, the issue is:
Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
the id of the textarea depends on the id of the button that was clicked (calVal);
so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
Because of that you get always the same value that is the one of the first textarea.
How to fix it? Avoid having multiple elements with the same id.
One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:
$(".popup2").html("");
You can see it working here: http://jsfiddle.net/v2djohhw/1/
If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.
You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/
I am working with webapp-net to build an application for iOS/android. in my app I have a form with some text fields. I want to have a "X" icon that usually appear on text fields when an input is entered. by clicking on that icon you can remove the whole input in just one click. The icon "X" appears only when an input is entered, when the textfield is empty the icon is not visible. If you could just give me an example of how to do it, I would really appreciate it.
this simple html shows how to have an input field and a X button that calls a clean function when pressed
<input type="text" onkeypress="show();" id="text" /><div id="close" onclick="clean();" style="display:none">x</div>
Now the javascript
<script type="text/javascript">
function show(){
document.getElementById('close').style.display = ''; //shows the X button when text is entered;
}
function clean(){
document.getElementById('close').style.display = 'none'; //hides the X button
document.getElementById('text').value = ""; //clears the field
}
</script>
Of course this lacks validations like what type of key is pressed to avoid showing the X button when you press SHIFT or CTRL