How to insert <li> element on <ul> using pure javascript [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am having an issue with javascript and i don't know how to solve it ...
Actually my code is working good with jsfiddle, but when i try to insert on my HTML page ,it simply doesnt work anymore ...
What i want to, is to add the < li> on < ul> each time i tried to hit the button named "Add" !
HTML code:
....
<td width="50%" valign="top">
<b> SUPER: </b>
<ul id="ul">
</ul>
</td>
....
<input type="submit" value="Add" onclick="add()"/>
....
JavaScript code:
<script type="text/javascript">
function add(){
var ul = document.getElementById("ul");
var li = document.createElement("li");
li.innerHTML = "LoL";
ul.appendChild(li);
}
</script>
The result with that code : it doesn't add anything on my HTML page when i try to hit the button...
Thankfully,

May be oversimplifying this, but here's a thought: Your input button is a SUBMIT, so when the onClick performs, the submit happens immediately thereafter, restoring the page to its original state. The process happens so quickly the appearance is that the code did nothing.
Just change the input type to "button", eg
<input type="button">

Related

Why I can't get this element identified by an id attribute? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">

How to I .append() user input inside a <div> tag? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am trying to make a contact card appear on the screen with the name that a user inputs into a tag.
This would require me to make a tag for the background color and size and then .append() the user's input inside of that div. It would also require the ability to click the button again and create a second or third contact card with unique information on it.
HTML...
<form>
<h3>First name: <input id="f-name" class="border-rad" type="text"></input></h3>
<h3>Last name: <input id="l-name" class="border-rad" type="text"></input></h3>
<h3 id="description-h3">Description:</h3>
<textarea class="border-rad" rows="10" cols="40"></textarea>
</form>
jQuery...
$(document).ready(function(){
$("button").click(function(){
$("#inner-div").append("<div id='contact-cards'>$('#f-name').val())</div>");
});
});
I suggest you create a new jquery DOM object:
$(document).ready(function(){
$("button").click(function(){
$("#inner-div").append($('<div />', {id: 'contact-cards', text: $('#f-name').val()}));
});
});
try this
$(document).ready(function(){
$("button").click(function(){
$("#inner-div").append("<div id='contact-cards'>" + $('#f-name').val() + "</div>");
});
});
In JavaScript "" or '' means string and this is why your code do not works.
$("#inner-div").append("<div id='contact-cards'>$('#f-name').val())</div>");
You need to get value of variable and concat to string, like this.
"<div id='contact-cards'>" + $('#f-name').val() + "</div>"
Because you need to separately write $('#f-name').val() to prevent it from being treated as string rather than function
$(document).ready(function(){
$("button").click(function(){
$("#inner-div").append("<div id='contact-cards'>"+$('#f-name').val()+"</div>");
});
});

How to show Javascript variable inside input box ,so that i cant post it in html form? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
http://jsfiddle.net/t32h0gj4/4/
how to show variable inside input box<b id="smsCount"></b> SMS (<b id="smsLength"></b>) Characters left
<br />
<input type= "text" id= "smsCount" ></input>
<textarea id="smsText" style="width:400px;height:200px"></textarea>
Please help me
Fixed: http://jsfiddle.net/t32h0gj4/5/
Changes:
HTML: change id="smsCount" to class="smsCount" (id's need to be unique)
JavaScript: change the selector to .smsCount and further below also call the jQuery .val() function to set the input box.

Show the price of a product in WooCommerce after a button is clicked by the customer [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The customer asked for the prices to not be visible for each product on the e-shop until the customer clicks on a button. So far jQuery/javascript, as a solution to this, seem more appropriate, I was wondering if there is something else I am missing (code wise, in PHP for example) that would help out more.
I request you to post what you have tried before asking in SO in future!
though Solution is here
<div class="product-image">
<p class="prod-name">Product Name</p>
<p class="prod-price" style="display:none" >$1000</p>
<input type="button" class="show-price" value="show price"/>
</div>
Css
.product-image{
border:1px solid #ccc;
width:100px;
height:100px;
background-color:#f6f6f6;
}
.prod-name,.prod-price{
font-size:12px;
text-align:center;
}
JS
$('.show-price').click(function(){
$(this).hide();
$('.prod-price').show();
});
Working fiddle here http://jsfiddle.net/raghuchandrasorab/njt1sfew/1/
Sure also works just with php but the page would need to refresh so i recommend using Javascript onclick event that show a hidden field when activated.
Not sure if this answers your question since im not quite sure what it was.

get a variable from a textarea in javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
here is what i'm doing but it doesn't work. I have to change the texte in the textarea but I don't know how to get it? thanks
<%
/** Variables */
String valeurTexte;
/** Logique */
valeurTexte = request.getParameter("texte");
valeurTexte=valeurTexte.replaceAll("Ç","Ç");
out.println("Votre texte: "+ valeurTexte);
%>
<form>
<textarea name="texte">ici</textarea>
<input type='submit'>
</form>
</body>
</html>
It's hard to see exactly what you want from the question, but assuming this is javascript because of the tag, give the textarea an id and do document.getElementById("myId").innerText=sometext
or document.getElementsByName("texte") and find the textarea

Categories

Resources