I'm making a website to edit a special image faster, and I want to change the text from the <text> thing when clicking the button insert from the input type "creatorcode".
input type creatorcode and insert
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction"();>Insert</button>
script
<script type="text/javascript">
function myFunction() {
document.getElementByTagName("text").innerHTML=document.getElementByTagName("text");
}
</script>
text
<b><text>creator-code</text></b>
anyone?
There are few mistakes in code which were fixed in below code snippet. Try this I hope it'll help you out. Thanks
Mistake 1 - Change input type="creatorcode" to input type="text" there is no creatorcode input type in HTML.
Mistake 2 - Change onclick="myFunction" to onclick="myFunction()" you need to add () after your method name.
function myFunction() {
var code = document.getElementById('entercolor').value;
document.getElementById("newCode").textContent = code;
}
<input type="text" id="entercolor" placeholder="Creator Code" onkeydown="submitOnEnter(event)" onfocus="clearWrongInput();" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" onclick="myFunction()">Insert</button>
<b><text id="newCode">creator-code</text></b>
Link for jsfiddle:
<input type="text" id="entercolor" placeholder="Creator Code" style="z-index:0;">
<button class="btn" type="button" style="z-index:0;" name="insert_button">Insert</button>
<div>
Some text here...
</div>
</div>
document.getElementsByName("insert_button")[0].onclick = function(){
document.getElementsByTagName("div")[0].innerHTML = document.getElementById("entercolor").value
}
https://jsfiddle.net/6drvcbz0/
Hope that helps.
Related
I have this code that needs to be adapted to work with something similar to the code below the commented line. If I can make it without many changes would be perfect so that I don't need to change the CSS and so. Any help? Many thanks in advance.
<!-- The code to be adapted is this: -->
<form action="" id="search-form">
<fieldset>
<input type="text" class="text" /><input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<!-- The new code that I got from the web and that needs to be adapted to the old one
is the following: -->
<textarea id="Blah"></textarea><button onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("Blah").value;
location.replace("https://www.google.com/search?q=" + Blah + "");
}
</script>
I'm imagining you probably want something like
document.querySelector("#searchButton").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
const url = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
window.location.replace(url);
});
<fieldset>
<input type="text" class="search" id="searchBox">
<Button id="searchButton">Search</button>
</fieldset>
The id attribute on HTML elements allows you to access them via JavaScript. There's a wealth of tutorials online if you want to learn JavaScript deeply, but the basics of what this is doing is:
It finds the HTML element with the id of searchButton, and adds a click listener to it --- this gets triggered whenever that element is clicked.
In that listener, we find the value of the text input with the id of searchBox.
We compose our new URL. One thing I've added here is a call to encodeURIComponent to correctly handle the cases where they try searching for something which contains a character which isn't valid in a URL --- for example, the space character etc.
It was not working as I wanted, but a little trick made it work.
Here is my final code:
<form action="" id="search-form">
<fieldset>
<input type="text" class="search" id="searchBox">
<input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<script>
let myvar;
document.querySelector(".submit").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
myvar = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
setTimeout(callurl, 1);
return false;
});
function callurl() {
location.assign(myvar);
return false;
}
</script>
I am trying to make a download button, however, when the button is clicked, I want the button value to say "File Downloaded". For some reason the file does not download... Someone once told me everything is possible in Web Development 😁
My Current Code:
<li><input onclick="this.value='File Downloaded'" href="DP_1tahoe.rbxm" download="DP_2018 Tahoe.rbxm" type="button" value="Download" id="myButton1" /></li>
Please correct my code, thank you so much 💘
try this its working
<form name="form" id="form" onsubmit="return false">
<button name="button" id="button" onclick="changeValue();" value="Download">Click Me!</button>
</form>
<script type="text/javascript">
function changeValue()
{
console.log(document.form.button.value);
// Changes the value of the button
document.form.button.value='File Downloaded';
console.log(document.form.button.value);
}
</script>
I have created this nifty little search bar above one of my table in HTML:
<div>
<form name="search" class="form-search" method="get">
<input type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
The search bar appears and I am able to search, but nothing is being returned.
If someone could point me in the right direction to be able to search an entire (better yet, multiple) HTML page(s) with this search bar, I would be thankful.
Am I right in thinking I need to implement some sort of web form?
You have to add method on the button something like that:
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("your input bar id").placeholder;
document.getElementById("demo").innerHTML = x;
}
I have button <input type ="submit"> that i want to convert into link button without affecting functionality. Issue is name attribute is used in existing functionality.
Below is the Button Example :
<input type="submit" id="b1" name="SEND" value="Send" class="f-special-button" onclick="DisableButton();">
Convert button to link which act same as this button..
You can use a short JS:
<a name="SEND" href="javascript: submitform()">Text</a>
<SCRIPT language="JavaScript">
function submitform()
{
document.form_name.submit();
}
</SCRIPT>
You can use to perform the action on button click like this
<form action="put the name of page you want to show here.html">
<input type="submit" id="b1" name="SEND" value="Send" class="f-special-button" onclick="DisableButton();">
</form>
I have a HTML page, source code is given below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.getElementsByTagName('button').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
My basic purpose is, when I click on button having id "btn3", it should display number of buttons in my HTML page (in this case 3). But somehow it is always showing 0.
Thanks for your quick reply. As all of you suggested, I have modified my code as shown below -
<html>
<script type="text/javascript">
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
</script>
<input type="button" value="button 1" id="btn1" name="btn1" /><br>
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br>
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/>
</html>
But now I am getting below error -
Message: Object doesn't support this property or method
Line: 4
Char: 9
Code: 0
URI: file:///C:/Documents%20and%20Settings/556996/Desktop/demohtml.html
I am testing in IE8. Please help!
Thanks,
Kartic
Try using either of
document.getElementsByTagName('input')
or the more specific
document.querySelectorAll('[type=button'])
The problem you're facing is that you don't have any elements with the tag name button. All of your buttons have the tag name input.
If you aren't supporting IE7, you could use querySelectorAll to get those elements:
document.querySelectorAll('input[type=button]')
Or you could change your HTML to use <button> elements:
<button type="button" value="button 1" id="btn1" name="btn1">button 1</button>
Use this...
function jsMeth() {
alert('Count of buttons : '+document.querySelectorAll('[type=button]').length);
}
Or this for old browsers
function jsMeth() {
var elem = document.getElementsByTagName('input');
var numBts = 0;
for(i = 0; i < elem.length; i++){
if(elem[i].getAttribute('type') === 'button'){
numBts+=1;
}
}
alert(numBts);
}
DEMO