I am new to Javascript. I can not change value of textarea when I press Goodbye button. But When I click hello it is working fine! Can you help to change the value of textarea when it is pressed the second time.
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
</script>
Your goodbye and hello input fields has the same id - that when call your myFunction the text variable will always be the value of your first input.
You have to use different ids for each input the you can handle click events separately for each button.
function handleHelloClick() {
var text = document.getElementById("text-hello").value;
setTextarea(text);
}
function handleGoodbyeClick() {
var text = document.getElementById("text-goodbye").value;
setTextarea(text);
}
function setTextarea(text) {
document.getElementById("myTextarea").value = text;
}
Comment:<br />
<textarea id="myTextarea"></textarea><br />
<input id="text-hello" type="text" value="Hello" name="text" /><br />
<button type="button" onclick="handleHelloClick()">hello</button><br />
<input id="text-goodbye" type="text" value="Goodbye" name="text" /><br />
<button type="button" onclick="handleGoodbyeClick()">Gooodbye</button>
You cannot have two elements with the same ID. This is why it does not work.
You will want something like this;
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction2()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
function myFunction2() {
var text =document.getElementById("text2").value;
document.getElementById("myTextarea").value=text;
}
</script>
You should have different id's for different inputs.
It's a bad practice to have same ID for all the elements.
<textarea id="myTextarea">
</textarea><br>
<input id="hello-input" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('hello-input')">hello</button><br>
<input id="bye-input" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('bye-input')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text =document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
You can start from learning JavaScript: https://javascript.info/
Two inputs with the same id is not a correct HTML, ids should be uniques on a page.
Try this:
<textarea id="myTextarea">
</textarea><br>
<input id="text1" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('text1')">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('text2')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text = document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
In JavaScript when you assign the same ID to two different elements and then try to fetch an element using document.getElementById() it will fetch only the first element that matches the ID name.
So, you can probably assign a different ID to the goodbye element. Also, you can have different functions to handle two different button clicks.
Please check out the example below.
console.log(document.getElementById("text"));
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello" type="text" value="Hello" name="text"><br>
<button type="button" onclick="hello()">hello</button><br>
<input id="goodbye" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="goodbye()">Gooodbye</button>
<script>
function hello() {
var text =document.getElementById("hello").value;
document.getElementById("myTextarea").value=text;
}
function goodbye() {
var text =document.getElementById("goodbye").value;
document.getElementById("myTextarea").value=text;
}
</script>
It's never a good idea to use an id twice. If you call document.getElementById("some-id") the browser will return the first element it finds. So the browser will never return the goodbye button.
function myHelloFunction() {
var text =document.getElementById("hello-button").value;
document.getElementById("myTextarea").value=text;
};
function myGoodbyeFunction() {
var text =document.getElementById("goodbye-button").value;
document.getElementById("myTextarea").value=text;
}
<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello-button" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myHelloFunction()">hello</button><br>
<input id="goodbye-button" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myGoodbyeFunction()">Gooodbye</button>
Related
<div class="container">
<input id="word1" type="text" placeholder="Enter First Word"><br>
<input id="submit1" type="submit" name="submit" value="check">
</div>
<script type="text/javascript">
let word1 = document.getElementById('word1');
let submit = document.getElementById('submit1');
function display(){
alert(word1.textContent);
alert(word1.innerText);
alert(word1);
}
submit.addEventListener('click',display,false);
</script>
the browser alerts with empty string for both textContent and innerText and i don't know why is this happening
input doesn't have textContent, if you want get it's value, you need to go with input.value.
<div class="container">
<input id="word1" type="text" placeholder="Enter First Word"><br>
<input id="submit1" type="submit" name="submit" value="check">
</div>
<script type="text/javascript">
let word1 = document.getElementById('word1');
let submit = document.getElementById('submit1');
function display(){
alert(word1.value);
}
submit.addEventListener('click',display,false);
</script>
Copy button works perfect copy text from first input field and click on paste button paste in it
<input type="text" id="txt1">Some text</input>
<input type="button" value="copy" >
<input type="text" id="txt2">Some text 2</input>
<input type="button" value="copy2" >
<input type="text"></input>
<input type="button" value="paste text" >
Try this solution. Add handler to the copy buttons and on each click get the previous input field's value and store in a variable. Then in the paste click set the text into the value of the paste button.
If you have this structure of html, in this way it will be easy to do (with prev()).
var text = '';
$('.copy').on('click', function(){
text = $(this).prev().val();
});
$('#paste').on('click', function(){
$(this).prev().val(text);
});
input {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" value="Some Text 1"/>
<input type="button" class="copy" value="copy" >
<input type="text" id="txt2" value="Some Text 2"/>
<input type="button" class="copy" value="copy2" >
<input type="text"/>
<input id="paste" type="button" value="paste text" >
since you said it's working perfectly then i understand your question is which language is used there, it's neither javascript or jquery, pure html is used only for that
var copy_text= '';
$('.copy_button').on('click', function(){
copy_text = $(this).prev().val();
});
$('.paste_button').on('click', function(){
$(this).prev().val(copy_text);
});
Hi so I have an input box with a button that when click goes to a url. I want it so whatever the user types it goes to the url + the added words in the input box. So lets say its default google.com/search/?q= then when the user types "cat" itll be google.com/search/?q=cat
<input type= "button" onclick="location.href=\
'http://www.google.com/search/?q=';"\
value="Search Google Images"/><br><br>
<br><br> Search item:<input type="text" id="dropdownID"><br><br>
Append the value of the input field with document.getElementById('dropdownID').value:
<input type="button" onclick="location.href='http://www.google.com/search/?q='+document.getElementById('dropdownID').value" value="Open Testrail Test Plan for Modiciation" />
<br>
<br>
<br>
<br>Search item:
<input type="text" id="dropdownID">
<br>
<br>
<input type= "button" onclick="loadUrl()" value="Search Google Images"/>
<br><br><br><br> Search item:<input type="text" id="dropdownID"><br><br>
<script>
function loadUrl() {
location.href = 'http://www.google.com/search/?q=' + document.getElementById('dropdownID').value;
}
</script>
I would use jquery for that:
https://jsfiddle.net/dqz1pvux/13/
<input id="search" type="submit" value="Search Google Images">
<input id="keyword" type="text" value="" placeholder="Type text here">
<script>
$(document).ready(function(){
$("#search").click(function(){
window.open("https://www.google.de/search?q="+document.getElementById('keyword').value+"&biw=1678&bih=790&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjNzbLf6OfQAhVD6RQKHZp5BRsQ_AUIBigB&dpr=1.09")
});
});
</script>
http://jsfiddle.net/KeithDickens/t2t9pvz4/19/
As it's written it works fine on my Intranet test server but JSFiddle it does nothing. Am I missing a nuance of JSFiddle?
HTML
<input type="button" value="Add More" onclick="nextLine();">
<div id="test1">
Test1:<input type="text">
Test2:<input type="text">
Test3:<input type="text">
</div>
<br />
<br />
<div style="display:none" id="test2" name="test2">
Test1:<input type="text">
Test2:<input type="text">
Test3:<input type="text">
<input type="button" value="Remove">
</div>
<br />
<br />
<div style="display:none;" id="test3" name="test3">
Test1:<input type="text">
Test2:<input type="text">
Test3:<input type="text">
<input type="button" value="Remove">
</div>
JavaScript
var xy = 2;
var divid = "";
function nextLine() {
divid = "test" + xy;
document.getElementById(divid).style.display = 'block';
xy++;
}
Because jsFiddle is adding window.onload = function() {} around your JS, which causes the function in your onClick attribute to no longer be in global scope.
If you look on the top left it does this by default. In order for it to work you'll have to select No wrap - in <body>: http://jsfiddle.net/t2t9pvz4/23/
How do you submit text box input to a javascript function without submitting the server?
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe(value typed into text box)" id="testButton" >Submit Response</button>
Javascript:
function submitMe(input) {
alert(input); //should output text box input
}
Thanks
No need to pass by parameter, just the the element by id.
function submitMe() {
var value = document.getElementById('test').value;
alert(value);
}
Or you could pass the id like:
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe('test')" id="testButton" >Submit Response</button>
js:
function submitMe(id) {
var value = document.getElementById(id).value;
alert(value);
}
Try
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe(document.getElementById('test').value)" id="testButton" >Submit Response</button>
DEMO