I'm just trying to include a simple jQuery script in a WordPress page. A friend of mine made the script and it's working in my browser. However, when I copy the following code in a WordPress page, I can't click the items and it doesn't seem to work. However, JavaScript is working on WordPress.
This is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var array = []
$('.productitem').on('click', function() {
var value = $(this).attr('value');
if($(this).css('position') == 'relative') {
$(this).css({'border': '0px solid black',
'position': 'static'});
array = jQuery.grep(array, function(removeValue) {
return removeValue != value;
});
} else {
$(this).css({'border': '1px solid black',
'position': 'relative'});
array.push(value);
}
});
$('.doorgaan').on('click', function() {
if (array.length == 0) {
alert('Choose at least 1')
}else if (array.length == 1) {
var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0];
window.location.href = link;
} else if(array.length == 2) {
var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1];
window.location.href = link;
} else if(array.length == 3) {
var link = 'http://www.project4.ramonkagie.nl/product-tag/'+array[0]+', '+array[1]+', '+array[2];
window.location.href = link;
} else if(array.length > 3) {
alert("You can only choose 3")
}
})
</script>
<img class="productitem alignnone wp-image-578" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/padded-black-front-
219x300.png" alt="padded-black-front" width="130" height="178" value="sportief" />
<img class="productitem alignnone wp-image-457" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/skopje-front-1.png"
alt="skopje-front (1)" width="130" height="209" value="casual" />
<img class="productitem alignnone wp-image-442" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/estro-black-front.png"
alt="estro-black-front" width="150" height="161" value="zakelijk" />
<img class="productitem alignnone wp-image-491" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/elias_lichtblauw_voorkant-
1.png" alt="elias_lichtblauw_voorkant (1)" width="150" height="130" value="sportief" />
<img class="productitem alignnone wp-image-479" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/alexis-cardigan-front-1.png"
alt="alexis-cardigan-front (1)" width="150" height="130" value="sportief" />
<img class="productitem alignnone wp-image-471" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/11/saint-germain- sweater-
front.png" alt="saint-germain-sweater-front" width="150" height="149" value="zakelijk" />
<img class="productitem alignnone wp-image-544" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/russell-side.png"
alt="russell-side" width="150" height="93" value="casual" />
<img class="productitem alignnone wp-image-588" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/antares-cement-ivy-front.png"
alt="antares-cement-ivy-front" width="150" height="83" value="sportief" />
<img class="productitem alignnone wp-image-509" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/steve-black-leather-1_1.png"
alt="steve-black-leather-1_1" width="150" height="74" value="zakelijk" />
<img class="productitem alignnone wp-image-522" src="http://www.project4.ramonkagie.nl/wp-content/uploads/2015/12/desertboot_black_right.png"
alt="desertboot_black_right" width="150" height="82" value="casual" />
<button class="doorgaan">Doorgaan</button>
As you can see on this page: http://www.project4.ramonkagie.nl/script/ it doesn't do anything. I've included it in the WordPress HTML page editor. I found that I can use the wp_enqueue_script, but that seems to be included in the PHP files, and I just want to include the script to a simple WordPress page.
jQuery()
over$()
as a way to reduce conflicts. You should also check the browser's console for errors. – j08691