I am totally new to coding. Please help.I am obtaining tweet text using node.js and displaying using html. When I input new text the result should replace earlier result in #tweets and not append to it
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
#<input type="text" id="tag" class="hash"/>
<button>submit</button>
</form>
<div id="tweets"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script>
var socket = io.connect('/link');
$('.hash').on('keypress',function(){
setTimeout(function(){
$('#tweet').empty();
socket.emit('message', $('#tag').val());
},2000);
return;
});
socket.on('message', function(msg){
$('#tag').val('');
$('#tweet').empty();
$('#tweets').after($('<div>').text(msg));
});
</script>
</body>
<html>
Replace .after with .html:
$('#tweets').html($('<div>').text(msg));
If I understand you correctly just use text or innerHTML.
For Example:
...
socket.on('message', function(msg){
$('#tag').val('');
$('#tweet').html(msg); //OR
$('#tweet').text(msg);
});
...
Is there also perhaps a misspelled JQuery selector? I cannot find the element "#tweet." It appears in both your timeout and in the socket event handler. I'd personally go with this instead, esp if there is a selector spelling issue.
$("<div />", {
text: msg
}).appendTo($("#tweets").empty());
EDIT: I like SlyBeaver's gist. I thought you needed an inner div for some reason. Rather than deal with .empty().append().chain().a().bunch().of().stuff(), I'd just do for plain text:
$("#tweets").text(msg);
or if the tweet contains HTML, use this or it will not be parsed as such:
$("#tweets").html(msg);
Change
$('#tweets').after($('<div>').text(msg));
to use .html() in jquery
$('#tweets').html($('<div>').text(msg));
document.getElementById('tweets').innerHTML = 'Your content';
Related
I'm using an API, and am trying to access the value of product.shoeName to change text on my HTML page. This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="shoepoo.js">
</script>
</head>
<body>
<div>
<p id="text" style="color:purple;
font-weight:bold;font-size:20px;">
</p>
<script type="text/javascript"> shoeName(); </script>
</div>
</body>
</html>
const SneaksAPI = require('sneaks-api');
const sneaks = new SneaksAPI();
//getProducts(keyword, limit, callback) takes in a keyword and limit and returns a product array
function shoeName(){
sneaks.getProducts("Jumbo Blazer", 1, function(err, products){
products.forEach(
function names (product) {
document.getElementById("text").innerHTML = product.shoeName;
})
});
};
Basically, I want product.shoeName to be shown as text, but nothing is showing up. How can I fix this? I understand it's a local function which is probably stopping the data from being shown (or something like that), but how can I work around this?
Made below changes in shoepoo.js
products.forEach((product)=> {
document.getElementById("text").innerHTML = product.shoeName;
});
But you need to create dynamic HTML components if there is multiple data in products. Otherwise, it set the last shoeName in the paragraph component.
I am trying to build a basic covid19 website. the code I am using is only returning [object Object] in the actual data. What I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("https://api.covid19api.com/summary", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
That's because you're trying to append JavaScript object to DOM. Instead, see what data you're getting (as someone mentioned in comments, by console.log) then you can edit your append part accordingly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("https://api.covid19api.com/summary", function(result){
$.each(result.Countries, function(i, field){
$("div").append("<span>"+JSON.stringify(field)+"</span></br>");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
Here I have a sample answer which appends all list of country. Understand each and every line and function how it works. I have appended list of country, how to render the rest items that I leave it to you. Don't get discouraged or disappointed; learning to code is a journey, not destination.
Note:https://cors-anywhere.herokuapp.com/ is added if you are running it in your localhost to avoid CORS's problem. If you have hosted the page, you can remove it.
$(document).ready(function(){
$("button").on('click',function(){
$.getJSON("https://cors-anywhere.herokuapp.com/https://api.covid19api.com/summary", function(result){
var obj=result;
var json = JSON.stringify(obj);
var s = JSON.parse(json);
s.Countries.map(function(c){
$("#result").append("<span>"+c.Country+"</span></br>");
})
console.log(s.Countries[0].Country);
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#p1").load("reporting/data.geojson").toString();
var str = document.getElementById("p1").innerHTML;
document.getElementById("p2").innerHTML = str;
});
</script>
</head>
<body>
<div id="div1">
<h2>try</h2>
</div>
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>
this is the code, p1 clearly shows on the screen but my actual problem is that i cant fill the string with it, "maybe the load function is the last to act i dont know" kinda new on this. I need to put the .geojson text in a string, or any other way to extract the coordinates would save me the trouble of string eddting. thank you iij advance
You need to use the callback of load to get the data from #p1.
The load method is asynchronous, so the code does not wait for the data to load and executes the next statement.
$(document).ready(function() {
$("#p1").load("reporting/data.geojson", function() {
var str = document.getElementById("p1").innerHTML;
document.getElementById("p2").innerHTML = str;
});
});
As you're using jQuery, you can use html()
$(document).ready(function () {
$("#p1").load("reporting/data.geojson", function () {
$('#p2').html($('#p1').html());
});
});
I am trying to create a <div><div><div><input type="text"></div></div><div> via javascript. But somehow, the code seems to be not working. I have tried to use DOM methods to create the above mentioned but nothing seems to work. Please Help!!
<html>
<head>
<script>
function newFunc2()
{
a=document.createElement('div');
b = document.createElement('input type="text"');
a.appendChild(b);
c=document.createElement('div');
c.appendChild(a);
var d=document.getElementById('new1');
d.appendChild(c);
}
</script>
</head>
<body>
<input type="button" id="btn" value="ChangeCase" onclick="newFunc2()"/>;
<div id="new1">
</div>
</body>
</html>
Try
b = document.createElement('input');
b.setAttribute("type","text"); // Here you can set radio,checkbox according to need
instead of
b = document.createElement('input type="text"');
Fiddle
To specify the type of the input you can have the setAttribute()
Docs:
document.createElement()
setAttribute()
I write this script to change the value of a textarea but I fail to do so. What's wrong with my code?
<html>
<head>
<script type="text/javascript">
document.getElementsByName("status").innerHTML = "hi";
document.getElementsByName("status").title= "hi";
document.getElementsByName("status").placeholder= "hi";
</script>
</head>
<body>
<textarea placeholder="What's on your mind?" onfocus="window.UIComposer && UIComposer.focusInstance("c4d981e9a2c98b0483252333");" name="status" id="c4d981e9a2c98b0483252333_input" title="What's on your mind?" class="DOMControl_placeholder UIComposer_TextArea">What's on your mind?</textarea>
</body>
</html>
Iif you try using:
var textarea = document.getElementById('c4d981e9a2c98b0483252333_input');
textarea.value = 'hi';
It should work.
Otherwise, because of the way getElementsByName works, you'd need to provide an index (zero-based) to the call to identify which of the textareas you want to work with:
var textarea = document.getElementByName('status')[0]; // selects the first element of name 'status'
textarea.value = 'hi';
Two problems
First, document.getElementsByName returns a NodeList (which is like an array), not a single element.
Second, you do nothing to delay the execution of the JS until the element actually exists. So it won't find it anyway.
Change to document.getElementsByName("status")[0]
Move the <script> element so it appears after the textarea.
I wouldn't be comfortable with using innerHTML to modify a form control either. I'd switch to value instead.
<script type="text/javascript">
document.getElementsByName("status")[0].value = "hi";
</script>
put this script in the body
<script type="text/javascript">
document.getElementById("status").value= "hi";
</script>
change getElementsByName to getElementById
getElementsByName -> returns array of elements
getElementById -> returns single control..
then put the script in between body tags not in header.....
<html>
<head>
</head>
<body>
<textarea placeholder="What's on your mind?" onfocus="window.UIComposer && UIComposer.focusInstance("c4d981e9a2c98b0483252333");" name="status" id="c4d981e9a2c98b0483252333_input" title="What's on your mind?" class="DOMControl_placeholder UIComposer_TextArea">What's on your mind?</textarea>
<script type="text/javascript">
document.getElementById("c4d981e9a2c98b0483252333_input").value = "hi";
document.getElementsByName("status")[0].value = "hi";
</script>
</body>
</html>