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()
Related
I was wondering instead of using the alert function to show the function result if there was a way to print it in a text field on the same page as the original variable input. Thanks!
create a div in your body for result like
<div id="result"></div>
update from script like
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = <your value>
Without additional libraries, using only browser functions, you can do this with the document.getElementById() function like this:
<html>
<head>
<title>test</title>
</head>
<body>
<input type="text" id="textfield">
</body>
<script>
function someFunction() {
return "Hello world!";
}
document.getElementById('textfield').value = someFunction();
</script>
<html>
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';
The following produces no visible input text field. What gives?
<!DOCTYPE html>
<head>
</head>
<body>
<script>
var my_input = document.createElement('INPUT');
my_input.type="text;
my_input.value = "blah";
document.body.appendChild(my_input);
</script>
</body>
</html>
You have a syntax error in your code
my_input.type="text;
should be
my_input.type="text";
Check this out
Easy way
document.write("<input type=\"text\"...blah blah...></input>");
Or correct your error
my_input.type="text;
to
my_input.type="text";
Note: Change the ...blah blah...
I am not able to call a javascript function from QT .
I am using the below code
QT code :
QWebFrame *frame = m_d->m_webView->page()->mainFrame();
frame->evaluateJavaScript("displayhello()");
Here `displayhello()` is the `Javascript` function defined in the HTML file.
HTML code :
<html>
<head>
<script type="text/javascript" src="" />
<script type="text/javascript">
function displaymessage(str)
{
alert(str);
}
function displayhello()
{
alert("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onClick="displayhello()">
</form>
</body>
</html>
Can anyone give me any pointers why the Javascript function is not getting called.
I know this post is old but in case someone has the same:
Always check Dev Tools to see what the JavaScript console tells you.
You can enable devtools by adding this line tou your QT main function
QWebSettings::globalSettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
Now by right clicking->inspect, console, you would have seen the JS interpret error.
You should have lower case 'c' in 'onclick':
<input type="button" value="Click me!" onclick="displayhello()">
QVariant holdInformation = map->page()->mainFrame()->evaluateJavaScript (QString ("displayhello ()"));
Replace map by your desired class name.
Also, try using onload.
<body onload = "displayhello()" topmargin = "0" leftmargin = "0">
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>