Make hidden input field visible HTML Javascript - javascript

Html input field is inside anchor tag like so ..
<a id="brand" onclick="myFunction()" class="brand" ><input id="mytext" onclick="myFunction()" type="hidden" value="Anchor Title">Anchor Title</a>
Javascript uses set attribute
<script>
function myFunction() {
document.getElementById("brand").innerHTML = "";
document.getElementById("mytext").setAttribute("type", "text");
var elem = document.getElementById("mytext");
elem.value = "Edit Title";
document.getElementById("brand").innerHTML = elem.value;
}
</script>
ACTUAL RESULTS
Anchor title is cleared on click
But, the input field is still hidden
Wanting To Achieve
Anchor title cleared on click
Input text field appears
User inputs text
Text from input becomes anchor title
Input field becomes hidden again

I think you should remove the line:
document.getElementById("brand").innerHTML = "";
(I don't know but maybe you delete the input element by that.)

Notice that when you do document.getElementById("brand").innerHTML = ""; you are deleting all things there are between <a id="brand"> and </a>, in this case the <input> line.
My solution:
<html>
<script>
function myFunction1() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "text");
elem1.value="Edit Title";
document.getElementById("mytext2").innerHTML = "";
}
function myFunction2() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "hidden");
document.getElementById("mytext2").innerHTML = elem1.value;
}
</script>
<a id="brand" onclick="myFunction1()" class="brand" >
<input id="mytext1" onchange="myFunction2()" type="hidden" value="Anchor Title">
<span id="mytext2">Anchor Title</span>
</a>
</html>

Related

How to get the innerHTML of an input in Java script

I am making a TODO list. I have difficulties with setting the input text on my card. Everything I write in the input, I want to select and to put on the card.
I tried to select the innerHTML of an input when I type something in. I don't know how to select the typed input text. I would then create a new element with the text inside, and would append it to the card.
let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
// eventlistner by button clicked
btn.addEventListener('click', function() {
var txt = document.getElementsByClassName('input').innerHTML;
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<buton class="add" type="button"> + </buton>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
To get the value of the input use the value property, not innerHTML. Also note that you already have a reference to the input Element in the input variable, so you don't need to use getElementsByClassName() to retrieve it - not least of all because the syntax there is flawed.
Once you have the text you can use createElement() to add a new p element to the .todotext container:
const btn = document.querySelector('.add');
const textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
btn.addEventListener('click', function() {
const txt = input.value;
if (!txt)
return;
const p = document.createElement('p');
p.textContent = txt;
textspace.appendChild(p);
input.value = '';
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<button class="add" type="button"> + </button>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
As others already answered your question. I just wanted to point out that there is a misspelling in your code (buton instead of button). Fix that and the button element would be rendered correctly.
First, getElementsByClassName will return HTMLCollection which is array-like, you need to use querySelector instead, also the innerHTML, textContent, innerText properties all are empty string for the input because the input is a self-closing tag without content inside, you need to use value property.
let btn = document.querySelector('.add');
let textspace = document.querySelector('.todotext');
const input = document.querySelector('input');
// eventlistner by button clicked
btn.addEventListener('click', function() {
var txt = input.value;
console.log(txt)
});
<div class="card">
<div class="todoheader">TODO List</div>
<div class="todotext"></div>
<ul class="list"></ul>
<div class="addtodo">
<buton class="add" type="button"> + </buton>
<input type="text" class="input" placeholder="add todo" />
</div>
</div>
btn.addEventListener('click', function() {
var txt = document.getElementByClassName('input').value;
});
You were using getElementByClassName which will be HTMLCollection.To loop over each element you need to convert it into an array loop over them.
var txt = document.getElementsByClassName('input').value;
You should get the value of an input , not the innerHTML
Also assign a unique id to you input fields and select them with it, it's much better :)

Button onclick attribute error

Hello i am having some technical issues with my HTML code and javascript so to begin.
i have the <P id="One">and i need once you click the All courses input to redirect you to another page and completly disapear himself using javascript.
<p id="One" >
<input type="button" onclick="allCourses()" value="All Courses" />
<input type="button" onclick="" value="1st Year" />
</p>
and the Javascript i am using is
function allCourses(){
document.getElementById("One").innerHTML="";
var input = document.createElement('button');
var value = document.createTextNode("Go to Google");
input.appendChild(value);
//input.type = "button";
//input.onclick="location.href = 'www.yoursite.com';
//input.value="Go to Google";
var element = document.getElementById("One");
element.appendChild(input);
}
function Google(){
location.href = 'www.yoursite.com';
}
The button works like charm but as soon i attack the onclick attr it doesn't do nothing!

JavaScript Appended Element Text Not Showing

I'm trying to create an online to do list for users and I want it to function so that when you enter a task and click the 'JotIT' button the task is appended.
So far the function to append works but the text is not visible for some reason even though when I inspect it, the text shows up in the HTML.
<script>
var welcome = 'Welcome To JotIT';
var jotItem = function()
{
//Create & Get the necessary elements
var item = document.createElement('input'),
space = document.createElement('br'),
form = document.getElementById("listing"),
frag = document.createDocumentFragment(),
textVal = document.getElementById("input-jot");
//Set Attributes to list item
item.setAttribute('type', 'checkbox');
item.setAttribute('name', 'jot-list');
//If there is no input in the textbox then create an alert popup
if(textVal.value === "")
alert("Please insert a value");
else {
item.innerHTML = textVal.value;
frag.appendChild(item);
frag.appendChild(space);
form.appendChild(frag);
textVal.value = "";
}
}
</script>
</head>
<body>
<h1 id="head">JotIT</h1><br>
<p> <script type="text/javascript">document.write(welcome);</script></p>
<input type="form" id= "input-jot">
<button class = 'btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
<!-- TODO: Add form submit tag instead of ul tag -->
<!-- TODO: Align the list items -->
<form id = "listing" method="get">
<input type="checkbox" name="me"> Start </input>
</form>
</body>
You Have to insert a label. Inputs should be self closing / empty elements. In particular an input of type checkbox won't correctly display a label. Use the label element for this purpose instead.
var welcome = 'Welcome To JotIT';
var jotItem = function() {
//Create & Get the necessary elements
var item = document.createElement('input'),
label = document.createElement('label'),
space = document.createElement('br'),
form = document.getElementById("listing"),
frag = document.createDocumentFragment(),
textVal = document.getElementById("input-jot");
//Set Attributes to list item
item.setAttribute('type', 'checkbox');
item.setAttribute('name', 'jot-list');
//If there is no input in the textbox then create an alert popup
if (textVal.value === "")
alert("Please insert a value");
else {
label.innerText = textVal.value;
frag.appendChild(label); // here goes the label
frag.appendChild(item);
frag.appendChild(space);
form.appendChild(frag);
textVal.value = "";
}
}
</head>
<body>
<h1 id="head">JotIT</h1>
<br>
<input type="form" id="input-jot">
<button class='btn-info' id="jot-down" onclick=jotItem();>JotIt!</button>
<!-- TODO: Add form submit tag instead of ul tag -->
<!-- TODO: Align the list items -->
<form id="listing" method="get">
<label>Start</label>
<input type="checkbox" name="me" />
</form>
</body>
This has to do with the fact that you're adding the label to the input incorrectly. Use the below HTML syntax and it will resolve your issue:
<label><input type="checkbox" name="jot-list" />The Text</label>

is it possible to update html content in a page using Javascript?

I have a html page with textbox and button.
textbox
button
If I enter some text in textbox and on click on the button, it should update the HTML page like this:
text entered with h1 tag
textbox
button
Is this possible with Javascript?
Yes, it is possible. Tempted to leave it at that, but...
window.onload = function() {
var h1 = document.createElement("H1");
var txt = document.getElementById('mytext');
document.body.insertBefore(h1, txt);
document.getElementById('mybutton').addEventListener('click', function() {
h1.innerHTML = txt.value;
});
};
<input type="text" id="mytext" value="" />
<input type="button" id="mybutton" value="Send it" />
$('textarea').keyup(function () {
var mystring = $(this).val();
$('p').text(mystring);
});
Sure, with javascript.

Change the value of xforms element via javascript?

I was wondering if it's possible to change the value of an xforms element via javascript and then submit the form with that value?
what i have tried is change the text of an xforms:input when an <input type="file"> is triggered and it works, the thing is that when i submit the form, the xforms:input doesn't seem to apply the value
<div id="ubi" class="controls">
<xf:input ref="ubicacion"/>
<input class="input-file" id="fileadjunto" type="file" onchange="uploadfile()"/>
</div>
<script>
function uploadfile()
{{
var inp = document.getElementById('fileadjunto');
var name = inp.files.item(0).name;
var span1 = document.getElementById('ubi').getElementsByTagName('span')[0].getElementsByTagName('span')[0].getElementsByTagName('input')[0];
span1.value = name;
}};
</script>
why am i getting the spans and inputs? if you check the xforms:input element in the console you'll see that it's converted to
<span .....>
<span.....>
<input..../>
</span>
</span>

Categories