This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 6 years ago.
i have this .js code:
var test = document.getElementById('box').innerHTML;
and this html code
<textarea id="box">testing</textarea>
<div>
<?php echo '<script>document.writeln(test)</script>' ?>
</div>
i was expecting the div's would show testing but, instead, i got undefined result. but then, when i change the var test to:
var test = "this is just a test";
the div shows exactly the var test value. can someone explain what happens there?
The problem is that:
var test = document.getElementById('box').innerHTML;
is being ran after your page is loading, and therefore, test is NOT defined. The other script is running first, because it is found first.
If you REALLY want to do it, you can do something like this. Put the script that defines test immediately after the HTML element you are targeting. That will define the variable test.
<textarea id="box">testing</textarea>
<script>var test = document.getElementById('box').innerHTML;</script>
<div>
<script>document.writeln(test)</script>
</div>
Related
This question already has answers here:
Dynamically creating HTML elements using Javascript?
(6 answers)
Closed 2 years ago.
Trying to make an Html div inside a div that is already made using javascript but my function has a problem.
Html part
<div id="test">
<button onclick="addDiv()">test</button>
</div>
Js part
let page = document.querySelector('test');
function addDiv() {
document.createElement('div')
document.querySelector('page')
addedDiv = document.appendChild('div')
page = document.appendChild('div')
document.getElementById('div').innerHTML = "ThisFunctionIsWorking"
}
the output should be seen in the console with a text inside the div that says ThisFunctionIsWorking
but instead I get an error(Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.)
I would appreciate your time helping me...
Your code is incorrect in many ways. I suggest you study basic (web) programming with the emphasis on fundamentals like return values, scope, etc. and then basic javascript and dom tree manipulation.
A solution to your problem is:
<div id="test">
<button onclick="addDiv('test')">test</button>
</div>
function addDiv(nodeId) {
var elem = document.createElement('div')
var container = document.getElementById(nodeId)
container.appendChild(elem)
elem.innerHTML = "ThisFunctionIsWorking"
}
This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 4 years ago.
Hi I'm trying to create a simple calculator website, and I'm trying to manipulate the DOM to display an updating equation, but it won't add the child to the display container.
HTML:
<body>
<div class="body">
<div id="display"></div>
In the Javascript, I have the following code to add an element to the "display" div:
JAVASCRIPT:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
Am I missing a line? I have the exact code for another page and it works but not here.
The example you provided is finely working:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
<div class="body">
<div id="display"></div>
</div>
Your <script> tag needs to be placed after the body content, not in the <head> section. This is because you must wait for the DOM to get loaded before you can use DOM methods such as document.querySelector() (i.e. at the point where your script is executing, document is undefined). If you still want your script file in the <head> section, modify it this way:
window.onload = function() {
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
}
However, the code you posted here is not causing the problem. There are many other errors in the JSFiddle you provided. Here are the errors:
let btn1 = document.querySelector("#1");
As stated earlier, this won't work with IDs starting with a number. Correct is using document.getElementById()
btn1.addEventListener("click", include("1"));
This is another mistake. The above line will only call include("1") once, and not on every click. This is not how you pass a parameter to a function inside an event listener. Correct is using
btn1.addEventListener("click", function() {
include("1");
});
...which will call include("1") whenever btn1 is clicked.
btnCLR.addEventListener("click", clearDisp());
If you want to call a function without parameters, remove the brackets. Only call clearDisp, not clearDisp().
equation.concat(value);
equation is a string, not an array. Use the normal addition (concatentation) operator:
equation += value;
Then, you have many functions inside event listeners which you didn't define. Either define these functions, or comment out the whole event listener. You will end up with a working calculator.
This question already has answers here:
jQuery: this.attr() not a function?
(2 answers)
Closed 4 years ago.
I am creating a list of all of my saved AI programs relevant to their name which is done like so and works fine:
#foreach ($ais as $ai)
<a href='#' class='saved-ai'>{{ $ai }}</a> <br />
#endforeach
I then have a jQuery script which is designed to append the value of the name to an input box.
<script>
jQuery(document).ready(function(){
$('.saved-ai').click(function() {
$('#ainame').val(this.html());
});
});
</script>
I tried to debug this to see what it held and why its behaviour was strange but I get this in my console:
Languages
The error I receive is:
Uncaught TypeError: this.html is not a function
at HTMLAnchorElement.<anonymous> (home:107)
at HTMLAnchorElement.dispatch (app.js:1)
at HTMLAnchorElement.g.handle (app.js:1)
After researching, app.js in laravel already includes jQuery. However, It seems that this.html() does not exist. How can I get the value of the clicked element?
The expected output here would be Language gets placed inside the input box as the value.
You could try changing html for text, like so:
<script>
jQuery(document).ready(function(){
$('.saved-ai').click(function() {
$('#ainame').val($(this).text());
});
});
</script>
here you can find more about it: http://api.jquery.com/text/
I am trying to amateurishly create an autocomplete input field with jquery. My first step is to get some results displayed below the input field by calling a php script on keyup with the load function of jquery.
I dont know how silly this attempt is, but i think i am almost there. However, I am stuck during passing the keyup variable to the script. Actually I can passa a variable but i need to use the keyup variable to pass.
For clarity on the question please see the code;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function getres(){
var x = document.getElementById("cit");
$('#resdiv').load('results.php?cit=x.value');
}
</script>
HTML
<input type="" name="" id="cit" onkeyup="getres()">
<div id='resdiv'></div>
PHP file being called results.php
<?php
if(isset($_GET['cit'])){echo $_GET['cit']."<br>";}
include('connnew.php');
$getprops=$clientdb->query("SELECT * FROM cities ORDER BY DATE LIMIT 6");
while($info=$getprops->fetch_assoc()){
//$results[]=$info['city'];
echo $info['city']."<br>";
}
?>
I m able to get the results in the div below with id resdiv. But the problem is, how do I ensure the value of Var X in the JavaScript function is appended to the load parameter results.php?cit= ?
I get 'x.value' being passed rather than the actual value of x. I think once I do that, eventually I can match the variable to the results array and show matching auto-complete kind of results.
You need to put x.value outside your quotes as that's a variable. You can make your code much shorter than it currently is. You should not have any issues with following way:
$("#cit").on("keyup", function(){
var x = document.getElementById("cit").value;
$('#resdiv').load('results.php?cit='+x.value);
});//
<input type="" name="" id="cit">
<div id='resdiv'></div>
regarding to your code, you have an error here:
$('#resdiv').load('results.php?cit=x.value');
change this to:
$('#resdiv').load('results.php?cit=' + x.value);
This question already has answers here:
parse html string with jquery
(4 answers)
Closed 8 years ago.
This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.
So:
alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:
$(Awesome).attr('value', 'false');
Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!
Use this
var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
In this case thisIsThat is a object and you can find anything using that object
This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.
<div id="out"></div>
<script>
var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
var temp = $(htmlStr);
var cb = temp.find("input:checked");
cb.attr("checked",false);
jQuery("#out").append(cb);
</script>
jsfiddle
The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.
Here is a basic example to show you the problem.
<div id="one">
<input type="checkbox" />
</div>
<button>Tell</button>
<script>
function tellMe(){
var myDiv = jQuery("#one");
var html1 = myDiv.html();
console.log(html1);
}
jQuery("button").click(tellMe);
</script>
Take a look this fiddle of the code above.
Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.
change
var Awesome = $(thisIsThat).find('input:checked');
to
var Awesome = $(thisIsThat).find('input[type=checked]');
now loop over it
Awesome.each(function(){
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
});