HTML和JavaScript应用程序

-2

我想用HTML和Javascript制作应用程序。我不是这些人的主人。所以我需要一点帮助。应用HTML和JavaScript应用程序

enter image description here

的图像现在我想的是，当我会点击橙色区域内的任何地方在中间的数量将增加1我怎样才能做到这一点使用JavaScript。我的代码如下：

<html> 
 

 
<head> 
 
    <title>Tabjih</title> 
 
    <style> 
 
    html, 
 
    body, 
 
    .container { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .container { 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
     background-color: orange; 
 
    } 
 
    p { 
 
     font-size: 200px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <p id="text">0</p> 
 
    </div> 
 
</body> 
 

 
</html>

请给我建议的JavaScript添加到这个实现西隧我想需要的代码。使用addEventListener

的container元件上

来源

2015-07-20 Abeer Hussain

试试这个链接它会帮助你.. http://stackoverflow.com/questions/3076679/javascript-event-registering-without-using -jquery – MPG

绑定click事件侦听从text元件
值投射到integer使用parseInt()
增量由一个
更新值获取当前值的值在text元素

document.addEventListener("DOMContentLoaded", function() { 
 
    document.getElementById('container').addEventListener('click', function() { 
 

 
    // Get the current value from the element 
 
    var value = parseInt(this.innerText, 10) || 0; 
 

 
    // increment the value by one, and update it in DOM 
 
    document.getElementById('text').innerText = ++value; 
 

 
    return false; 
 
    }); 
 
});

html, 
 
body, 
 
.container { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: orange; 
 
} 
 
p { 
 
    font-size: 200px; 
 
}

<html> 
 

 
<head> 
 
    <title>Tabjih</title> 
 
</head> 
 

 
<body> 
 
    <div id="container" class="container"> 
 
    <p id="text">0</p> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2015-07-20 08:40:19 Tushar

为什么选择Downvote？有什么可以改进？ – Tushar

这真的是我清除步骤后发现的最佳答案。谢谢@Tushar。但你能再帮我一次吗？其实我并不是很了解HTML，所以。当我点击橙色区域时，它会增加，但有时会选择文本。我怎样才能阻止这件事？ –

@AbeerHussain你不能，这是浏览器的默认行为。你至少可以在事件处理程序中使用'return false'。 – Tushar

document.getElementsByClassName("container")[0].addEventListener("click",function(){ 

document.getElementById('text').innerHTML = parseInt(document.getElementById('text').innerHTML)+1; 
});

http://jsfiddle.net/s6qc2w3g/12/

来源

2015-07-20 08:52:45 AshBringer

HTML和JavaScript应用程序

回答

相关问题